Bootstrap 5 Crash Course Tutorial #7 - Grid Layout (part 1)

Key Takeaways

so then my friends next up is the bootstrap grid system now for those of you that don't know what a grid layout is it's a way of placing content onto a page in rows and columns it's very popular now bootstrap uses a 12 column grid system and that means that on any given row we can set the width of elements to be anything from 1 to 12 columns in width for example right here we have four elements in a row all of equal width that means they must all be taking up three columns in width because four elements times three columns is 12 columns in total below that we can see two elements on a row the first one takes up eight columns in width the second takes up four columns so these grid layouts can be fully responsive too so that at different screen sizes you can apply different column widths to elements for example on medium size screens you might want an element to take up six columns in width but on large screens you might want it to take up four columns in width these things are possible using the bootstrap grid system so let's take a look at a few examples in our code so i'm going to show you a few different examples of different grids we're going to start with a basic grid then we're going to look at specifying column widths individually then we're going to look at responsive column widths so that's content that changes the width in the row as we reach different break points as screen sizes change and then finally just define columns at the bottom so i've created these four different sections for those four different grid examples now the first thing to know when you're working with bootstrap grid is that when we create a grid it always goes inside a container so i've created containers right here to surround each grid now i've used container lg but it doesn't have to be it can just be the normal container or any other break point like container excel for example or something else doesn't matter each container also has a bit of margin just so we space these out on the web page a little bit okay so first we'll look at the basic grid now how do we create this grid well there's two steps first of all we create a row of contents so we'd imagine a row of content going from left to right and then we create columns inside that row and spread our content out in that row into different columns so let me go through this example i'm going to first of all create a row by saying div dot row so it has a class of row and that is now a row of content and we can place elements inside this row so i'm just going to create a div right here and then inside that i'll create another div with a class of p hyphen 5 to give it some padding and then also i'll give it a background color so we can see it on the page bg hyphen primary and also text hyphen light so we can see the text and then we'll say call one so this is going to be the first column right now i'm going to duplicate this and paste in two more times so we'll say column two over here and column three so we have these three elements inside this row and they're all blue in the background that's the primary color they all have a bit of padding and they all say something inside them now if i take a look at this as it is they all stack on top of each other now that doesn't look much like a row that's more like a stack i want these to be a row from left to right and in order to do that we have to apply column classes to these three divs these are the divs inside the row so i'm going to alt click all of these three divs to apply a class to each one and that class is just going to be call and when i do this i'm basically saying look i want this to take up some room on this row and this and this as well so they should all be next to each other now occupying space in these kind of like imaginary columns if you like so if i save this now they're now left to right like this which is pretty good right and we have a little gap in between each one okay so when we use columns like this and we don't specify anything else the default behavior of the grid is to let this element and this element and this element take up equal space equal amount of columns on the grid now we said that the grid has 12 columns in total so if we have three elements then each one is taking up four columns because three times four is twelve if we add in a new one let me do this down here and say call four then each one is going to take up three columns and we can see that now watch this if i start to make this smaller then at some point we're gonna see these columns or these different elements start to stack on top of each other because out of the box it is responsive and you can see right there call 4 goes down to the next line if i make this smaller we never reach a point where these start to go down to the next line but to be honest it doesn't look great and we can control how they react when we make screen sizes smaller and you'll see how to do that later on but we do get this one stacking below so that's how we can make this kind of basic grid just by using a row and then this call class as well all right now what if we want to specify the width of each one of these individually well let's give this a whirl what i'm going to do is copy all of this right here and i'm going to paste it inside this one and then in fact what we'll do is just have three elements so we'll take the fourth one off and these are going to be all the same we're going to have those classes right here for the content inside each of the columns but now i want to specify the width of each element how many columns should they take up so to do that i can say call dash and then the number of columns i want this element to take up so i could say take up 6 columns and this can be 1 to 12 because remember the width of the whole row is 12 columns so as long as they all add up to 12 then you're fine so i'm gonna say down here call hyphen three so that's nine in total now we have three left so i can say call hyphen three down here save it and now the first one takes up six columns in width three columns for this one and three columns for this one so that's how we can specify different column widths all right so what if we start to make this smaller well if we do that then it never changes and they start to look a little bit squashed so nothing goes down to the next line or the widths don't really change and sometimes we need to make our columns or content inside the grid responsive so that maybe on a small screen each of these takes up 100 width and they go on top of each other instead and we can create that kind of behavior using responsive column widths so again i'm going to copy this row and paste it down here so we have the same content and these things for now are going to stay the same as well these three elements because we want the background primary bit of padding and the text light on each of these but now i want to specify that for different breakpoints that i want different column widths so for example i could say well if we're starting from kind of mobile screens right when we get to a certain breakpoint then i want you to have four columns so i could say call and then sm for small and then four so what this is saying is look from mobile screens i want you to have 12 columns in width but when we reach the small size screen going up then take up four columns in width and then when we reach large size screens going up i want you to take up six columns in width so 12 is the default to begin with and then it goes to four it's small and six at large so i'm going to do something similar down here i'm going to say call hyphen sm hyphen 4 and then the same down here call sm hyphen 4 and then when we get to a large screen lg hyphen three lg hyphen three so this means a very extra small screens like a mobiles where we don't specify a column width it's automatically gonna be 12 columns in width it's going to take up the whole row and they'll all stack on top of each other but then when we reach small screens they're all going to be 4 columns in width which add up to 12 3 times 4 is 12 right and then when we get to large screens this one will be 6 columns in width and these 3 which is still adding up to 12 in total so let's save this and give it a whirl and we can see right now that very small screens they're all stacking on top of each other all 12 columns wide as we get a bit larger and we go to a small size screen at that break point right here they all take up four columns they're all equal width and then when we get to the large break point up here somewhere this one goes to six columns in width and these are three each so that's how we can redistribute the content dependence on the size of the screen using these different breakpoint classes for columns all right then so lastly i want to show you how to justify content so what i'm going to do is not copy all that because there's a lot of stuff here i don't really want to use instead i'll create a new row and then inside that again we're going to have three different dips now the first one is going to have a call hyphen md and that's a medium-sized screen hyphen three and inside here we'll do a div with some padding so p hyphen five also bg hyphen primary and then text hyphen light and that's going to be call one so what i'm saying here is look inside this row to begin with extra small size screens is going to be 12 columns in width because i'm not specified a width for extra small screens then as we get bigger inside the screen and it reaches the medium break point then i want to take up three columns in width and i'm going to do the same thing for the other two so let me copy this paste it down here a couple of times so call 2 and call three so let's just preview this first of all now notice by the way they don't add up to twelve there's nine columns in width here so there's three columns kind of left over in the grid and we can see that over here remember on extra small screens they all stack but when we reach the medium break point right here if we do that then they go to three columns in width each and we have these three columns left over now you can do this that's absolutely fine but what if i want to move these three columns so they go maybe to the right side or even in the middle of the page well we can justify them by using some justified classes and to do that i could say justify hyphen content and then hyphen we could say start and that would put them all at the start and that's where they currently are so it's not going to change anything if i wanted them to go to the end i could say end and they're going to go over to the right or i could say center and they're going to center the columns which is quite nice i could also say between and that's going to put much more space between the columns if i save this notice they take up the full width but now the space is between the columns these are very similar to the flexbox properties and you might be familiar with them if you ever work with flexbox and that's what bootstrap is using right here to justify these different elements inside so let's stick with center so they all go in the middle so hopefully that explains this grid system a little bit more we are going to be using it going forward to create our web page and we're going to start that process in the next video