So a few days ago, I had to make a project with Bootstrap, I had never worked with it in the past and neither with Grid. It was really difficult for me, and when I decided to find information, I got a hard time looking for something that I can actually understand and use. So in that day, I told myself: if I get to understand this, I will write about it so if someone its a beginner like I was, they don’t have a hard time as I did. So here is: my first article about the basic information to get to understand Bootstrap and don’t die, (or in my case panic) trying.
What is a Bootstrap? It’s a framework created by Twitter that once you get to know, you realize it’s a beautiful and really useful framework that will save you a lot of time. If you want more info, you can read it directly from one of its creators over here.
There is a lot of information about Bootstrap and you can do a lot of cool stuff with it. But if you are getting started like I was, and want to know the basics, the most important things I learn so I was able to start using it after all the reading are:
Imagine if you have 6 containers, and for your mobile view (extra-small devices) you want to arrange them like this: 2 on the first row, two on the second, and so on. Before using Bootstrap (and with some basic styling), your containers may look like this.
Now the first thing you need to remember is that for Boostrap’s column system to work, you need to add an element with the class container. This class helps to sets the width of the layout depending on the width of the screen and also places all the components inside the container in the middle of the page.
This means your page should have the following structure: body, container, and all the other elements you’re going to need inside it.
The next step is that you need to add the class “row” around the components you want to arrange.
So it would be logical that if we want to have 2 components on the first row, and 2 in the second, and 2 in the third, we can pair them by two in a row, right? Let’s see!
It works! See how I add to each component inside the row the class col-6? The sum of the 2 columns it’s 12 that is the total of columns available in our grid system. Imagine the 12 columns would be equal to a 100% width, if I assigned 6 columns to a component, that means it would be 50% width.
And why I’m using col-? Because for extra small devices ( screen width equal to or less than 576px), in Bootstrap, you use this class to define the distribution of columns for them, for small devices ( scren width greater than 576px) we assign the class col-sm-*colums*, for medium devices (screen width equal to or greater than 768px) we use col-md-*columns* and so on. If you want more info about the device media queries used by Boostrap you can go here.
But what if we want now that our containers on medium devices to be 3 on each row instead of 2? Now we need to create another component that has the class row, and inside it, positioned the 3 divs we created, that at the same time, they already are inside another row each one of them for the extra small devices version.
Imagine that after you just did the changes for the medium device view, you realized you need that on large devices all of these containers are on the same row now. You need to make changes again! Picture that but with 1000 lines of code, and you get a mess!
So how to solve this? First get in mind how your components are going to behave in any device view and if in any one of them are going to be on the same row, put them together in a component with the class row, it doesn’t matter that in the view your currently working, they are not together, you will be using it for later. In my example. My code would look like this.
Now start adding the column distribution according to the view you want to. For this example, I’m only going to work on extra small, medium and large devices
Our code will look like this (keep in mind that it always need to add 12 or it will move to the next row)
We can try it, and see that it works! On bigger screens, all the divs are on the same row , on medium ones are 3 on each one, and on small ones, 2 on each row. For medium and large devices, the containers are centered, and for extra small devices, the containers have full width. Also, you can see that for the medium devices view, each of the components is using 4 spaces of the 12 available in the row (or 25% width of 100%) , and for the large devices view, they are using 2 spaces of the 12 available (or 16.666% width of 100%).
So as you can see, Bootstrap it’s amazing and surprisingly easy once that you get to undestand it, but this is only the tip of the iceberg so if you want more info you can go to the next pages: