Bootstrap 4 Tutorial: Create Responsive Web Design With Bootstrap Grid System


Your website can be optimized for large devices, medium devices, small devices and even extremely small devices all by using Bootstrap Grid System so before we actually start with this tutorial I want to first explain the basics that you need to understand, and then we are going to dive into the code. So in Bootstrap there are just a couple of the things that you need to learn and then you will be able to pretty much create the design for any size of the device. So, let’s say this is our website like our rows okay so now in the Bootstrap first thing that you need to create is some container and then inside that container you are able to put all the rows and the columns that bootstrap has so if this is our website you have to type of the containers if you want to have the container that will be that will take the entire width of this browser then you are going to use container fluid okay and then if you want to have some fixed the width so let’s say like this okay so this will be your website this is fixedw you are going to use only the container and then what once we start writing the code this will make a lot of the sense but first please understand it like this and then the next thing that you have in the Bootstrap Grid system is the rows okay so this is a row okay and then I will say here okay we have like ro okay and then the next thing that we have are the columns so let’s say we have here three columns here we have two and then here we can have as many as we want up to 12 okay so those are the columns so now if we think about this we can understand that basically in order to create some layout we first need to define our container inside that container we need to define how many rows and then inside each row we need to define the columns now the thing is that those columns can be up to 12 okay and if you have more than 12 then each column will be just go to the stacking okay so but that’s the issue so now if we want to create those three identical combs we will say that this will be 4 4 4 so now in sum this is 12 if we want to have those two it will be 6 and 6 and then if you were to have those five columns now we can make them identical bits because it’s 5 but what we can do we can say okay I want to have this is like 2 this is 1 so now this is 5 in total but we can say okay this will be again 1 so this is 6 and then we can have this one 6 okay so now here when we draw this this doesn’t look like symmetrical with the number but as you can see in total this is 12 okay 12 12 12 and then inside each of those columns we are going to put the content and now this layout will stay like this based on the element that you put here okay so now here we can have medium we can have large we can have small then extremely small okay and then here you need to specify just the number that you want to hear okay so let’s say if we want to create this one it says six if we want to create this one it will be column and then depending on the size that you want let’s say small then number four okay and that’s all that we need to know so let me now show you how to write the code so now I’m here at my PHP storm and the first thing that we are going to do is we will just create the basic HTML document maybe I’ll just change title to the grid system okay and now we need to include the boot-up library so go to the getbootstrap.com i would download and then here we have multiple options we are able to download source files are able to use CD on links or maybe use one of the package managers there are so many available that we can use but in our case I will just use CD on link okay and I will put just after the title okay so now as we said before we need first to have one container then a row then columns so first I will say I want to create one container the container can be just container container or container fluid for now we’ll just use container and I will show you the difference a little bit later then we need to have at least one row and then inside this row we are able to add just different columns so for now I’ll just say column what I say here column 1 and this will be column 2 and now if we go to our browser and see what we have you can see that we have two columns but at the moment it’s very hard to see the size of them so maybe I will just apply a few different bootstrap classes first one is that I want for the first collum background to be dark and text let’s say white and then for the column tool we can just say background info okay let’s see now okay so now as you can see we have two columns with exactly same size and if we resize and start moving around it will always maintain that size because here we didn’t define the type of the devices for which we create this and we didn’t define the size so if we want to say this will be size 4 and this one will be size 8 as we said it needs to be 12 okay now when we refresh you can see now that this one is much bigger than the current one and when we keep resizing it will maintain this size but the things will change when okay when we define for which type of the devices we create this so maybe we can say for now I want this for medium devices okay so let’s see what will happen so for medium it is the same size and as you can see I can keep resizing up to the some point and you can see here okay and now boom after 768 pixels if we go to the stacking okay you can see now on 769 is this and when we move a little bit it will go to the stacking so that’s how your website is going to be optimized so if you create everything for the medium devices now when it’s mobile it will compress all those collumns and just put them one over the another okay now if we change this to for example large devices you will be able to see now that much earlier when we have it like this big now what earlier it will go to the stacking so I guess 992 okay okay here one two three okay and now it’s full now that we go to the stacking okay can see and now it will stay like that so maybe the best for you to see this is if we duplicate maybe three times okay so maybe here I will just say this is Row one okay this one will be let’s say row two and this one will be Row three okay so first one let’s say will be for small devices the second one will be for the medium and the third one will be for the large so now when we refresh you can see now that all three rows are in one line but when we start resizing you will see now that after 992 just okay you can see that Row 3 is going into the stacking and now Row 3 column and column 2 is one old another now if we keep resizing 768 okay here now you can see that Row 2 is under stacking while Row 1 is still maintaining the size so if we resize even more now all of them are one old another now there are just few more devices like extremely small and extremely large but that’s really rare case scenario when you are going to use them because usually when you design something for the large it will be applied for the extremely large and when you create something for the small you will want to have the same layout for the extremely small so those two are really rare case nears when are you going to use those now here we have so many different options in order how we are going to manipulate the content do want to put it to the right to left and stuff like that but I guess that overall in this tutorial if you understand this it will be more than enough for you to understand the booster grid system and then if you want to really dive deep and learn a lot more about bootstrap then I want to invite you to visit my course where I show everything about the bootstrap and then also I’m teaching you javascript and jQuery MySQL PHP and then at the end we are going to create entire content management system something like WordPress so when you go to that course you are able to basically understand and create anything when it comes to the creating website so if you want to visit that please take this link so guys if you like this video please like it and shave to your friends of course if you have any questions or anything feel free to leave it in the comments below and I will make sure to answer all of them take care

14 Comments

Add a Comment

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