Bootstrap 5 Grid System Tutorial

hey guys it's David from MD bootstrap comm and in this video I'm gonna teach you how to use the newest bootstrap 5 grid system now regardless whether you are already familiar with Brit system from a previous version which is bootstrap 4 or you are new to bootstrap you're gonna find everything you need in this video we're gonna compare what has changed in a grid system between bootstrap 4 and bootstrap 5 as well as we're gonna build everything from scratch so you could to learn if you haven't work with bootstrap before now before we start don't forget to subscribe to our channel so you won't miss more tutorials like this and now let's get started ok guys so let's start coding we're gonna start with the installation and obviously there are multiple ways to install bootstrap so we can we can use NPM to do so you can use gulp and other ways but for today I'm gonna show you a classic way of downloading their CSS NGS acid-fast now I need to make note here because at this very moment when I'm creating this tutorial the bootstrap Doc's page aren't released yet and there is no like you know page I could give you a link to download our newest newest bootstrap when you were watching this probably this this will be already there but as for as for now I've just created this page here so we can find this link in the description below so go to the description open this link and I have this page for you where I will be linking the latest version of the bootstrap obviously you can also get it from the bootstrap Docs but if this is not there yet or it's just easier for you you can go to the description go there and here you will find this page it might looks a little bit different so it might change in the future but there will be always this download button and this download button will get you the newest version of bootstrap so first as for today we have this 5 zero alpha one so I'm gonna download it and we're gonna click download and it's downloading here so I'm gonna open this now go to downloads it's still downloading okay so here it is I'm gonna unzip it I'm gonna rename it to be as five so if we go inside and then again for today there are just CSS and J's folder so what I'm gonna do I'm gonna open this project in Visual Studio code and I'm gonna create index.html file manually so if you if you have the same terms now this index just created and now I'm gonna press an exclamation mark and press stop this will procreate this will provide me a basic HTML structure of my page and let's change title to something like bootstrap 5 crash course okay so what we have to do now obviously we have to link our style sheet so let's type link and provide link to CSS bootstrap CSS now what we know so need to do at the end of the hour body tag we have to import GS and we need to think so first dependency and only as for now because as you know jQuery isn't dependency anymore it's a popper so I'm gonna download this from CDN so I'm gonna put the link in the description for you or you can or you can just google it so it's the newest version of popper 2 for OS for today and I'm gonna link our Jas so let's have a look at this script source equals to Jas bootstrap Jas okay and that will do let's put some heading over here hello bootstrap word let's save it let's run it and let's see this works okay I can already see this typical font for bootstrap and yeah there are no errors so we are ready to go okay guys so let's now talk about the most crucial component I think the most important one which made bootstrap so famous which is obviously a bootstrap grid so further for those of you who are in know bootstrap grid I'm just gonna cover some differences between bootstrap four and five and for those who don't know what it is I'm also going to explain exactly what it is and how to use it so in general bootstrap wheat is a tool which allows us to create a line outs which you can see on these two pictures right so long story make short this tool allows you to create a different layout for different devices depending on the screen size so as you can see on the right top corner we have a layout for desktop where we have like more place we have some margins we can set few boxes next to each other because we have a plenty of space to display them and it will be still perfectly visible while on the mobile devices where there is not as much space on desktop then we would rather use the full wave of of the divine so this what we can do we have use of bootstrap grid now in a nutshell how it works it uses a three main components so it uses container actually containers rows and columns so within containers we put rows the violet one and then we inside the rows we are putting column or columns multiple so now the next important thing to know about bootstrap grid our bootstrap breakpoints so these are the places as you can see so these are the dimensions of our screen which which kind of split our layouts so we can we can have as many layouts as brave as breakpoints you you can see so we can have different layout for extra small devices which are from 0 to 500 60 pixels small medium large extra large and extra extra-large and these are the breakpoints so this is the screen size after or below each the layout will change and let's let's have a look at example because this will hopefully explain everything to you so let's start with the example number one and by the way don't worry we're gonna learn in the next part of this tutorial in couple of seconds how to build this from scratch for now I just want you to see how it works so example number one very obvious and very common layout so for some kind of block or whatsoever we have a main column with content and we have a sidebar and now when we start shrinking this screen size you can see the screen size here in the top corner when we start shrinking this it will get smaller and smaller and smaller and once we reach one of the breakpoints which is 7 6 4 it will change layout so now these two columns are one below the other and this is obviously because as we've seen here this is the 7 6 8 actually pixels medium screen size which was defined for this layout to change second option shows a little bit more complex one so we have like header and some articles and footer and hanging and then again if we make this screen smaller it will just get nested one below the other and finally to explain you how the grits work let me just let me just tell you that as you already know grit consists of of container rows and columns and each column can have size size from 1 to 12 and what does it mean actually you can see it here so we can have even within a row we can have either one column which is with size 12 which is 12 with I don't know what this is 12 you need some unions with or it can have any other size from 1 to 12 the whole idea is that in one row we cannot have more than 12 altogether so what we can have here we can have either 12 columns like we see here so we have 12 x 1 which gives 12 in result and then when I'm gonna start shrinking this you're gonna see a different behavior and this is because we can apply multiple size to the same deep so this if depending on the break point has a different science so it will have size one two three four six all 12 combs and let's see how it works so I'm gonna start shrinking so now when I reach next breakpoint so we've been to extra-extra-large and now we move to two large sorry two extra-large so that was double and this is just extra large n in extra large our column has size of two and as a result we can fit on these six of columns next to each other and be remaining six will go underneath so now let's continue shrinking now after next breakpoint our columns have size three so then again since it's three we can fit just four elements three times 4 gives 12 and then remaining goes underneath let's continue shrinking now our size is 4 so then we can just fit 3 columns next to each other and obviously they are getting wider right relatively wider to to our screen now when we reach next one we can just fit two columns because size of each column is 6 and finally when we don't have enough space we want to our our column to take all 12 all with with the size of 12 okay so now let's quickly go through changes in grid from bootstrap for to bootstrap 5 so then again we already said that there is new extra extra large size introduced there is this gutter class which has been replaced with gene star and we gonna see how to use it just in few seconds and there are a few other changes which we gonna see right now I prepared two classes here so we can color our calls and containers so that you could see easily what the science is let me maximize this one or actually let's put it this windows aside so we can see it so let's start with container so the basic container is element which allows us to center elements on the page so as you can see by default we have margins over here we can obviously use something which you already know from bootstrap for so content container fluid will take the full wave the full wave are available but what is new here is that we can decide container and the break point like MD for example so this will get the full wave until the break point so if I'm gonna shrink this so now it's taking the full width and for the smaller screens but once I which medium break point then it would change to a normal container okay so this is about the containers now let's talk about them talk about the rows and n columns so let me also get rid of this style as we don't need to see it right now I will leave the coloring for columns so basically as I mentioned before we use rows to aggregate columns and width we have few options to use grid so for example what we can do we can specify these let's say treat this with class call SM and this will be like one number one two and three let's save it and we have them here so if we're not going to specify this the size of the column need to automatically try to calculate so in this case it will just take size of four one because we have three elements so 12 divided by a divided bar by 4 will obviously give us 3 now what we can do we can mix it so in the second row we can for example just have two of them and bootstrap would take off take care of the calculation so this works pretty easily but obviously more often what you want to do you want to define this size on your own so let's do it now let's do this example which you've seen before so let's do call em d8 so the MD is gonna be medium size is gonna be our break point and it's like main content mayn't and let's create another one for for sidebar so far and here we have this sidebar and now when we shrink it it will go one below the other okay now and so we can create very very very complex structure and so we're gonna probably have another tutorial on this one specifically but for now I hope you got the good understanding and how it works and how powerful it is let's just talk about something which has changed in bootstrap five which are gutters so what we can do here let me just use an example from from from two dogs so if you're gonna have a look at this one we have this gutter X set to five here and this is giving us this space here let's see what's gonna change if I'm gonna adjust it to one so I hope you can see how this spacing between this element here inside our call is changing when we change when we adjust the gutters obviously this one is in X ASIS then we can do the same in the second axis Y axis so let's have a look at this one so this is this space between rows right one two three four and finally five and that's it for today thank you guys for watching this video I hope you're gonna find it useful and if you enjoyed it please leave a like below this video please don't forget to subscribe to our channel because we preparing more for you and very soon you're gonna see new tutorials on bootstrap 5 regarding different technologies like how to use bootstrap file with no js' PHP laravel Ruby and so and so on so if you know if you don't want to miss it don't forget to subscribe and turn notification on thank you and see you in the next video

Channel: Keep coding

Views: 76,843

Rating: 4.76753 out of 5

Keywords: Bootstrap 5, mdbootstrap, javascript, bootstrap tutorial, web development, web design, design, UI KIT, bootstrap, Bootstrap, MDBootstrap, Web Development, Web Design, UI Kit, Material Design, tutorial, how-to, guide, explained

Id: DZKf9l42WCo

Length: 15min 49sec (949 seconds)

Published: Tue Jul 07 2020