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:
- It uses a 12 column system: Bootstrap work with a 12 column grid system to create the layout of a website. You can picture it as if 12 invisible lines are dividing the viewport of a device and we arrange our contents in these 12 columns
- It’s mobile-first oriented: Boostrap was created with the idea that most people watch now pages on their phones. So they work first for mobile and then to bigger devices
- Classes and more classes: Bootstrap has a lot of classes for a lot of things: styling, alignment , wraping, creating: buttons, cards, navbar, among others, and they are amazing! You don’t need to know them all. What works for me and some of my colleagues were that we used this page that contains all the classes in Boostrap. Every time we were working on a project we would look at them and search if there was a class for what we’re trying to do. With time, you get to know what has a class in Bootstrap and what doesn’t, and you will need it less and less, but it’s really handy to have it marked as favorite on your explorer at the beginning
- The magic of components: Tired of creating a navbar? Want to create a carousel? Don’t worry, Bootstrap has your back! You can go to the Components Sections on Bootstrap’s page, there are a lot of examples of components we use every day. My recommendation? Understand the classes of the components, find the one that better suits your needs, copy them, and make the modifications needed for your code, especially at first, then, when you have more experience you can start creating your how
- There is a lot of ways to integrate Bootstrap to your code, but if you are starting, I recommend you, to link it like you add a CSS’s file or a Fontawesome’s icon! here you can see the instructions.
- Ordering components: so one of the mistakes I made, was that I didn’t order the components I was using for all the different devices views correctly. I started coding for a mobile view, and when I tried to code for a tablet view, it was a mess! I didn’t know how to do it, so to avoid you the headache I got, I’m going to show you through an easy example, how you can work with columns in Bootstrap
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:
Happy Coding!