Bootstrap 5 Grid System Tutorial

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