Bootstrap Grid System Tutorial | Bootstrap 5

in this video we'll be taking a look at the bootstrap grid system how it works how to make columns rows and how to make it all responsive so let's jump right into it all right so here is the bootstrap website at any point in this video if you get lost or if you want more documentation or some of the examples we're going through just head over to docs then scroll down to layout and head over to grid most of the stuff we'll be going through will be in this area as well and i'll link it in the description below before we get fully started though you need to understand the grid system and the column system for bootstrap it's pretty simple to be honest the bootstrap system just has 12 columns and you can apply to design them however you want you can just have one by one by one all the way up to 12 we can say have four by four by four that adds up to 12 or you could just have one row which essentially is the whole 12 columns here's a quick example of what that looks like if you're wondering but otherwise let's just jump straight into this example and start building out with real code to see what this looks like when it takes shape the first thing you'll want to do is head over to get started and introduction here we're going to scroll down to the starter template and this will get our project up and running it's just some code to essentially jump into vs code and put that in so we'll create a new file in vs code and we'll call this index.html so i'm just going to call this index.html over here to run this up though we might need an instant of live server i already have this installed so i'm just going to click f1 and select it but if you don't have it installed you can jump onto extensions and download it something to know about is that the new bootstrap 5 grid system uses flexbox you can learn more about flexbox at the css tricks website which i'll also link in the description below and flexbox essentially allows you to utilize all the room in a container and apply how many columns you want in there they adapt depending on what size the screen is and you can play around with them you can change the flex direction to go either vertically or horizontally and you have pretty much full control of how you want to lay out things but with bootstrap you can apply css classes to create all of these changes so let's see how this works here is our starter template there's not too much content in here but we've got our head here which is importing bootstrap and we've got our body with our hello world i'm going to get rid of all the syntax below the fold here and we're going to start fresh the first thing we're going to do is create a div with a container class and inside here we're going to add a row this row will have a number of columns so here i'll create one more div with the class of column and we'll copy paste this across a couple of times so you can see how this looks as soon as we hit save we can see three essential columns here but because they're sort of invisible i might actually add a bit of a style here so i'll do border one pixel solid red just so that you can see each one this will be essentially how all of the flexbox works so you can see the three columns have equal size and if we were to resize them we can see that that equal size stays the same no matter what size we're on the first thing we want to know about is responsive design how do these flexboxes apply when for example the screen size turns smaller well we have lots of options utilizing the responsive design variables that we normally have in bootstrap those variables are normally for example xs for extra small sm for small md for medium lg for large this typing is not working at all so let me just put this autocomplete so it doesn't automatically generate excel for large and xxl which is a new one for extra large now if we wanted to see how this works in practice if for example on this column we put a dash sm we'll see that the column has already broken this is because i'm really zoomed in on this sidebar but if we were to zoom out we can see that column has no longer broken this is because in smaller screen sizes then this column will automatically adapt and go into a single column with a single row and this is the power of being able to apply these grids on the fly without having to worry about what their width is another thing to note is that if we were to create another container here in the past when we were using bootstrap we had to clarify how big a column is by passing in maybe a dash 4 or a 5 and this basically means that it uses 4 out of the 12 columns that you can do in bootstrap now this is very difficult because sometimes you don't know if an item might be 4 columns or 6 columns so what's really cool about the bootstrap five grid system is that we can simply remove this dash four and it utilizes all the room available there that's left over or for example it has an equal amount of room if you remove all the dashes altogether as well this is the power of auto layout columns and it's another great feature that you can utilize but of course if you want to be very strict about the sizing of your columns you need it for a specific reason then you can pass in these values i'm going to pass in dash 6 here and dash 6 and it essentially looks the same but for example if i wanted 1 to be 3 and the other one to be 9 then we can keep it like that 2. now you may have noticed that these ones with the 3 and the 9 aren't particularly responsive and that's because we haven't added in any responsive letters here let's actually add some in we'll pass in maybe lg and sm and see how they apply in order to do this we need to pass it in before the number so in this case what i'm going to do in pa is passing sm on the 3 and maybe uh lg for the nine and hit save on that and we can see that it's applied here and if we zoom out it eventually will get back to three and nine and then if we zoom back in we can see that that's adapted too and one of the things that i've noticed is that because the three one here isn't applying until the sm viewport it's sort of missing a little bit here to the right i don't know if you exactly want that but again it gives you more fine detail and more control over how you're doing your responsive design sometimes the content that you might have on a column though is variable if it is variable you might not know what size you need it to stay in there's another class that you can utilize to be able to do this and that's the auto class this class you can pass in just like you did before where you maybe have column sm auto and when you apply this it's just utilizing the room that it needs to for this item i'll pass this in for the lg as well and you can see that both of those have applied if we zoom back in we can see that it's just utilizing as much room as it can and then for example when we zoom all the way out it's not fully growing to the size it can it's just again utilizing the amount that it can for the column this can mean that some columns might simply stay a little bit stuck on the left there and we might not want that so in order to center them we need to add in an extra class into the row what i'm going to do in is pass in justify content md center and this should allow those two items which are just automatically growing for their size to be centered and that looks already a lot better as we zoom out and this only applies on the md viewport but for example if we wanted to apply to all viewports we can remove that md for the responsive design and it will stay centered no matter what sizing we're in the next thing you can do with the grid system in bootstrap is applying different classes together in combination to have different types of columns depending on the responsive design or the review port you're on this essentially means that when you're on a tablet you might have six columns and six columns if you're on a desktop you might have four four and four and if you're on a mobile device you just have one let's have a look at how this looks like to do this let's remove the sm auto and let's apply maybe six in here so we'll have column dash sm-6 and we'll create another one here which will be md and for the md viewport we might have four columns because we'll have more space let's hit save on that and have a look so in the mobile responsive version we just have the one column if we zoom out now we have sm-6 which is just two lots of six columns which we can see here and if we zoom out even more we can see that that's actually now four columns and four columns we could even fit one more in there but right now it's still centered as of the class we added in earlier to justify that we can remove that but we can see that it is indeed four columns now of course sometimes you don't have to manually set all of this and there are new classes now in bootstrap that allow you to set all of this in the rows class which is a little bit different let's see how that works firstly let's change these colors to blue just so that they look a little bit different and remove all of the column classes that we added before and let's remove the justify center as well so we've got these two nice columns here that just look like that and what we want to do is maybe add one more just though that we have maybe three maybe four of them and now that we have that we want to jump into the row class here and in the row class we are going to add in a new class called row columns and then maybe pass in say two we'll hit save on that and we can see that now we have a maximum of two columns on this row now this is a little bit odd so it doesn't matter what size that we're viewing this in the responsive design it's always utilizing two if we were to bump this up to three we can see that it's fat um it's fitting in three columns now but that fourth one here is a little bit out of place so this is useful but in order to utilize it properly we do need to do a couple of different things the first thing we can do is actually set this to be auto so auto will allow us to automatically utilize as much room as we have here and for example if we were to zoom out we're fitting in all four columns but if we're zooming back in we're only fitting in say three and if we were to zoom in even further which unfortunately i can't do we would only fit into but this is another class that we can utilize of course all of those things that we learned previously with responsive design still apply here so for example we could have these raw row column auto into a viewport that we applied depending on the viewport we're on so here instead of auto i'm going to pass in maybe sm-2 and then let's apply another one here and this one can be say md-3 or four maybe even and hit save on that so the first thing we'll notice is that on the full viewport here on md we have four columns and as we zoom down to the sm viewport now we have two you can use the grid system with the columns to essentially have nested columns and rows this means that you can have a row with maybe two columns and in one of those columns you can have another row let's say maybe another three columns let's see how you can do this here we've got our example and i'm just going to copy out maybe another one and this one here i might do as the color purple i know that floor and pop will probably be very happy at this color and what we're gonna oh i did not spell that correctly at all for a pool and what we're gonna do for this purple one here is just have two columns and these two columns will just be standard but for the second one here i'm going to copy paste our red example here that we had at the start and we're going to see how this applies we're going to keep it with just two columns for this red one and hit save and the first thing we'll see that um they've already wrapped but if we zoom out and we zoom past their sizing we can see that now they're just here and they're essentially wrapping depending on the responsive design that they have available this more or less covers everything we need to know for the grid system in bootstrap 5 but stay tuned for the next video in that we'll be having a look at what we need to do to use the column system this is the part of the video where i ask you to hit that like and subscribe button my name is adrian i do videos around design development and all that jazz i'll see you in the next one

Channel: Adrian Twarog

Views: 16,527

Rating: 4.8598948 out of 5

Keywords: Bootstrap Grid System Tutorial, bootstrap grid system, bootstrap grid system explained, bootstrap grid, bootstrap, grid, bootstrap 5 grid, bootstrap 5 grid tutorial, bootstrap grid tutorial, bootstrap grids, bootstrap grids tutorial, bootstrap 5 grids tutorial, bootstrap grid layout, grid bootstrap, grid bootstrap tutorial, grid bootstrap 5, bootstrap 5, bootstrap tutorial, grids tutorial bootstrap, grid tutorial bootstrap, grid tutorial bootstrap 5, html, css, coding, website, code

Id: Wqu-d_b3K-0

Length: 11min 50sec (710 seconds)

Published: Tue May 11 2021