Using the Bootstrap 4 Grid  | BOOTSTRAP 4 TUTORIAL
Articles,  Blog

Using the Bootstrap 4 Grid | BOOTSTRAP 4 TUTORIAL


Welcome to this video great to have you here in the last video of this series I had a look at what bootstrap is and how we add it to our project in this video We’ll take a closer look at the bootstrap grid I’ll explain how it works And how we can use it to layout our page and to make sure everything is positioned where it should be so let’s start Now how does the bootstrap grid work? Behind the scenes it uses flexbox to position elements and to make sure that everything is where it should be You could of course use flexbox yourself and my colleague Manuel Actually triggered a video on flexbox that might be interesting to you feel free to check it out But writing flexbox on your own was not being super difficult is of course more cumbersome than simply adding some CSS classes to your HTML code, so let’s see how the bootstrap grid works a Bootstrap grid is simply created with a bunch of HTML. Elements typically divs you have one div with the container class and This name is not chosen randomly it has to be named container to be understood by bootstrap in the container class you now create rows and columns to define your grid because that is how all Grids typically work, so here. We now add a number div with the row class You can of course add more than one row you can add as many rows as you need in this case I add two Now in the row class you add columns and columns are the places where you put your actual content Columns can be as wide as you want as you will learn and you use them to essentially create cells in your grid You got rows with columns. Well you got cells So a column is in its easiest form simply created by adding a call class in The grid here like this so another day for the call class and now I could name this Row one column one Queue well print the address of this cell so to say if I add an average column here I could name this Row one call to and In my second row let’s say I also had a column there, but the only one then this would be Row two column one Now if we save this and we go back to the page we see that text here now This is a bit hard to see I want to style this and for that. I’ll actually add my own classes I’ll add my container to the container. I’ll add my row to the row and To all the columns here, I’ll add my column and for the second row I’ll also add my row this allows me to add my own styling after the bootstrap import and Deliberately added to this fowl and there. I’ll first of all style my container to maybe get a border of one pixel solid and green Then I’ll style my row to get a border of the say three pixels solid and red and Then I’ll add the my column style here to give this a border of three pixels dotted and blue and Let’s also add a style for our body our document body and give it a margin of 30 pixels so that our content doesn’t sit right on the edges of the document we now reload this we actually see our grid like this and I should remove that white space to also see the red border I guess So now we can clearly see the rows and the columns with the blue dots around them And this is how we can position our content now interesting to see by default each column takes up an equal amount of space so if we resize this each column stays at 50% of the available width and If I shrink this down it’s also the case though if I go below a certain threshold For very small devices here it actually breaks Into two lines, but I have to go really really small for that That is the default behavior if I just use the column class here. Just call Now bootstraps grid is actually more capable than that because often you don’t want to have a 50-50 distribution You want to have one column that’s one third of the available width and the other one should maybe have 2/3 You can add with us by tweaking this column class or this call class here to get an additional ball piece of information so we basically changed the name Bootstrap defines a couple of different column class names, and this is another one we can use column four we can then add column eight to the second one and now you have to think of these numbers here as Shares of the available space they always and that’s important They always have to add up to 12 you got a 12 column grid by default so we can add up to 12 columns where each would then be column one or Nothing at all And it would automatically be distributed now if we set this to column four we tell bootstrap from the 12 available Columns this column here should take four so the width of four columns and the second one should take eight So together they add up to 12 You could of course also use 6 and leave to empty at the end of the row But with this the full row is occupied but the first column will have one third of the space the second one we’ll get the rest if We reload the page we can actually see this in action There we now see our first row one third of the size and the second row gets the rest Now sometimes you want to be even more precise than that because you wouldn’t have a different layout for your small and your big devices Let’s say for the small devices so for your mobile phones you want to stack these columns So they should actually become rows so to say they should not sit next to each other But for medium sized or larger screens you want to have them sit next to each other Now you can get there by tweaking this name Even more besides the share of the available columns Which should get you can add a size name so to say to define for which kind of? Screen sizes this should apply for example I could name this cow Md4 to indicate for medium sized or bigger screens this should get four of the available Columns I of course can now also adjust the second column here and add MD eight here now There are five classes available you can have medium sized screens with MD like this but there Also is large with LG for bigger screens XL for extra-large for very big screens and on the other side of medium you got SM for small tablet size and you also got X For extra small that would be your smaller mobile phones So these are the available names you can use and you can really combine all these numbers adding up to twelve and the size classes to control how your grid looks like if we save it like this and We reload the page now you see it’s stacked on each other and only on bigger screens It sits next to each other with this four to eight distribution Now let’s say we want to have yet another design for small screens Which is not the smallest class? Extra small would be the smallest class and there I want to have them sitting next to each other instead of stacked Which they are currently doing so I simply add call sm6 to both columns and now if I reload this We shouldn’t see a difference for this screen here But if I shrink it You see now. It’s evenly distributed. This is now a smaller screen and only if I go to very small screens. We stack it and This is the power of the bootstrap grid you can’t configure a lot and you can really find unit to your needs with these combinations of shares of the available width and to different device sizes and as shown at the beginning you can of course also omit all of that and just use col to distribute the available space evenly across the Columns you defined Now if that we covered the bare basics of the grid, but we can do more Let’s assume we have Column widths that don’t add up to 12 So we got some empty space maybe in row 2 if I copied add row there And I now give it a share maybe 4 and 4 so together They don’t add up to 12 You can see if I reload this and I may be named as column Q here to be correct Now you see we got Q columns with the same width since they both have 4 But they’re not taking the full space because they’re not adding up to 12 now sometimes That’s just layout you want because typically you’re not creating tables here But you’re creating a header a sidebar and other content so therefore you don’t always want to take the fall with But maybe you now want to Center these two columns here so in row two you want to Center them horizontally Now that’s easy with the bootstrap grid you can add an additional class? class not named two row but additional a class to the class list on the road div and the classes you can add here are actually inspired by the Flex box settings that are happening behind the scenes so if you know flexbox they’re going to sound familiar to you if you want to Center everything you can call this justify content center with dashes between the words Now justify content is the flex box rule for Well setting where the content should be positioned and with that you see the indeed is centered now alternatives to Center are start that is the default though you don’t need to explicitly define this this will simply move the elements to the left and Well you already guessed it. We also got end besides that we got two other ones though We also got around Which will? Put some space between the elements or put some space around them to be precise so to the left to the right and between them And now ever reload this you see they’re kind of centered But these spaces also between them So the empty space is basically divided up equally to the left to the right and then to the left to the right of each column making it double the space in the middle and sometimes you just want to have each item be pushed to its nearest edge so column one to the left and column two to the Right this can be achieved by using the between name so justified content between this will put all the available space between the two columns like this this makes the alignment on the horizontal axis really simple But what about vertical alignment this has historically been very difficult in CSS well It’s super simple with Flex box and therefore also with the bootstrap grid Let’s give our rows some height so that we can see this So to the my row class which is added to each row I’ll add a height of 300 pixels if I now reload the page you see the columns take the full available height Dad might be an default behavior you want But sometimes you just want to take the height you set for the columns or the content requires Now therefore you can also define how they should be positioned vertically you can again go to the row Let’s stick to the second row and there besides justify content Something you can also add a line items something again coming from that flexbox property name that is used behind the scenes and There you got start for example if you take start and reload the page You actually see that now for the second row the columns only are as high as required by their content And they’re then pushed to the start vertically off the row Now we of course also got Center and and here so let me quickly show Center I guess you can think what end is Center center sit And that’s awesome because vertical centering not that easy and CSS at least in the past but one thing we also got is stretch, so if I set this to stretch here and I reload the page now We are back to default that is why we also actually don’t have to set this Now sometimes you want to change the behavior For only one column and not for all and therefore setting this on the overall a row is the wrong place Well you can always go to a column. Let’s say the second color here and there you can add a line Self-start maybe now this should get pushed up, so this second column should get pushed up well It’s the first one stays stretched So let’s reload and indeed that is what we see so this is how you get the full Flexibility over how the items are aligned and positioned in your grid which of course is an hour awesome tool in your toolbox Now we covered a lot and your official Docs. Which are linked below the video are a great place to dive even deeper But one other thing I want to show you is how? You can actually switch to order of columns now you should be careful with this It’s possible as you will see in a second, but it’s also confusing Sometimes it’s really useful though sometimes you want to have a different order on your mobile phone than on your desktop device Let’s say you can easily switch the order by adding another class to your column so to the first column Which actually right now is obviously the first element from left to right I could add order 12 and this also goes up all the way to 12 because we got a 12 column grid and Then I could give my other column here order two maybe so a number smaller than 12 Now keep in mind right now column two is on the right Which makes sense if we reload they switched because the order of numbers matters here The lower number wins and is moved to the left the bigger number is moved to the right Which is why the first column goes beyond the second column if we had more columns Then all these orders would be taken into account and it would be order respective to their order number now This could be used in conjunction with the device size breakpoints. We could say we only want to switch the order For medium sized or bigger screens so I add the MD part to the order name for devices smaller than that the default order from left right so as to finally the HTML code will be used if I now reload this You see it’s switched because we’re on a medium sized or bigger screen size here But if I shrink this it actually goes back to the normal Order because we’re on a smaller than medium size screen and this of course great for a creating responsive layouts Where you maybe want to switch? Some element to the top for your mobile devices you would coach this in a mobile-first way so Code the order you want to have in a mobile phone And then you can switch the order for bigger screens as we do it here by adding the order class Now the last interesting thing I want to show you is offsetting this means pushing or moving your columns to the left by a certain column count Which you can kind of achieve with the? justified content between or around part But there the available space is just split up evenly now if you want to say I got two columns with with Ford and I want to move them to the left By let’s say two columns by default and then only treat the remaining space thereafter as the well remaining space Then you can add the offset – to Class here, this simply tells bootstrap move this two columns to the right if we save this and reload You won’t see anything here actually because we switched your order which will overwrite this But on smaller screens you see there is an empty space to the left And then we still get that space between setting for that Remaining space there after but we got them pushed in two columns And of course there could be any number of your choice and that can also be made responsive by adding the breakpoint names So we could say only push it in on medium sized devices So now if I reload this you see its back to the left because this is on a smaller than medium sized screen but if I increase this we does still don’t see anything because the order thing here actually overrides this and To be very precise the order doesn’t override that offsetting But keep in mind that we switch the order and we offset this first column now This is only the first column on a mobile device So we also need to add this offset code to our Second column or actually we only need to add there because this will be the first column due to our switched order on medium sized or bigger screens I hope this makes sense so now if you put the offset code on the second column And I now reload this it’s pushed in but if you go to a smaller screen That’s no longer the case and was dead you can really now fine-tune your positioning You’ve got a lot of tools for alignment for distributing available space for setting the available space by moving columns in like we just saw for Reordering your elements for defining the widths of your columns defining different widths for different screen sizes and the official talks hold a lot of examples on this if you want to dive deeper I Hope you got a first impression on how this works though and a great ways To always build a grid like this like we did here in the video Color your borders and then play around with the different classes to get a feeling for how it actually works and behaves I hope this was helpful and with that We’re well prepared to style our mini project in a nice way, so let’s dive deeper into this in the next videos off this serious

100 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *