Changing our grid layout

First of all, the grid that we used for the current landing page is just a showcase of Bootstrap's potential and possibilities of customization. In this chapter, our objective is to make the grid fancier and more beautiful. To do this, we will change the grid to be like the one presented in the next figure.

We will go a little faster this time, since you already know how to create the grid using Bootstrap. Also, we will go mobile-first, as we discussed in the last chapter, but the screenshots will be taken from larger viewports just to improve the understandability.

Starting over the grid system

As you can see in the grid image, we split the grid into six parts. This time, each part will be a section that we will present step by step. If you are starting the example from scratch, don't forget to keep the boilerplate that we presented previously.

The header

So, we will start with the header. The code for representing the grid presented should be this one, to...