First of All

If you are a beginner and you want some help with Bootstrap, follow me and ask for anything on twitter.

Introduction

Well, if you are here it is probably because you have heard of this important tool for styling in an easier way your pages. Maybe, because you have already tried it by yourself and started hating it and now it is wondering "Why the hell people say that it's way easier to apply bootstrap?"

One thing I know for sure: Bootstrap IS amazing.
But there are some stages that you go through before thinking this way, specially if you try learning it only by reading its documentation.

The Stages of Learning Bootstrap

For my own experience, learning Bootstrap by yourself having only the help of the documentation provided is really difficult and you probably are going to face most of the following feelings:

• You do not understand the main concept of it and think that it is not that powerful tool that you were expecting it to be;
• You try small tests and then you just do not like it;
• Everything is not working and then you start hating it;
• You remember how 'easier' it is with your css styling and then you totally hate it;
• You finally understand the main concepts and start enjoying it a little bit;
• You understand how to apply and connect everything and you finally love it.

Main Concepts You Must Know

- Bootstrap

You may think of Bootstrap as a Lego pack of pieces. You have a lot of small pieces and with it is possible to build whatever you want, but only if you assemble it on the correct way.

Bootstrap was developed as a way to avoid writing the most common css-code for every page we build. And that is all! So, if this is a stylesheet, all you have to do is go to the Bootstrap Home Page and link to your header the stylesheet and the javascript functionalities (if you need).

Then, you start adding all the small classes that Bootstrap provides you and there is no need for any styling, it is already done! After understanding it, it is important to master the main classes and how its interaction happens.

Following, you can read about the main classes that you probably will use.

- -fluid

This class is used to apply some small responsiveness on the element. It basically sets the width of the component to stretch through width as 100% according the different views that your page will be seen.

- Grid

In my opinion, this is the most useful resource of bootstrap, but it has its peculiarities.
Once you want to trigger a grid use, you must ALWAYS be using a row class and nest the columns as its children.

Important: Every row class creates 12 columns. Never forget about it.

So, since we have 12 columns inside each row, time to assemble your columns. For the main example, we are assembling 3 columns. Even though it would be possible to just add 3 col classes, for best practices, that is how it should be coded:

Note: By only adding col classes without the index of how many rows the component should take will divide the content for the number of classes that have no index. This is helpful in a few cases, but it is not the best practice.

So, what to do when you need to access and split up these columns? You have to nest another row - which is going to be divided in 12 columns as well. How intuitive is that, eh?

- Responsiveness with Grid

This characteristic is what makes grid the most important tool of Bootstrap.

In order to correctly understand it, take a look at this viewport description from the Bootstrap official documentation that shows all its breakpoints.

As you can see, the order of the viewports go from extra-small (xs) to extra-large screens (xl). Then, any application that you do for a viewport, if there is no other higher viewport defined, it is going to apply to all above. Pretty logical, right?

How can you get responsiveness then?

It is simple! You are free to add multiple classes!

For the next example, we will be applying the following specifications: The content should take the whole screen on mobiles (1 column only), 2 columns once it is a tablet portview and finally, 4 columns once it is being seen on a laptop and up. In order to do it, you just have to add the viewport before the index. Here is the solution for this:

For computers:

For Tablets:

For Mobiles:

Flex Display

One of the most important tool for displaying content in CSS is Flex-box, and it would not be different in Bootstrap.

Displaying flex in Bootstrap is usually a move to fit the content inside the container or even inside the grid column. Just like the original tool, the most important functionality is to justify or align the content according to the main direction chosen to be the reference.

Using it is pretty simple, and also justifying and aligning the content. The next example covers its main utility.

- Margins and Paddings

I am pretty sure that this styling was the most recurring coding of your CSS until this point, right? Well, not anymore!

Bootstrap works with margins and paddings using rem units that goes from index 0 to 5. You can also choose each side individually and you can even apply the negative margins concept.

I am not creating any example for this section! These are classes that you have to use multiple times and get used to how much it "moves" the component from its original placement, after understanding the documentation.

Personal Insights of Bootstrap

Learning and practicing the use of Bootstrap through your projects will not only help you on the page that you are using the tool, but for your entire coding for CSS as well.

The main result that I achieved by applying myself through all these stages, with a lot of research, try and error, resetting my entire project and finally understanding it is that now I think clear of the whole result naturally.

After understanding Bootstrap, it is easier to plan your page and create small classes for yourself that will fit n-components instead of only the components that are exactly the same through your page, resulting in a cleaner and way more compact code, which in my opinion, is quite elegant.