Learning out Bootstrap Grids

So far, everything that we have built has been linear; meaning all of the components and lines come one after the other, there is nothing side-by-side.

One of the major benefits of Bootstrap is the ability to use a comprehensive grid system that takes into account the screen size. So imagine on your laptop, you want to show 3 paragraphs side-by-side. That would look fine on the laptop but it would be smashed together on phone or tablet screen. With Bootstrap, you can configure it so that on the laptop, the paragraphs would be next to each other, but on the phone or tablet, the paragraphs would show up one after the other.

The way this is done is by using the row and col classes. Inside of the row, you can fit up to 12 columns, or any number of columns whose total adds up to 12.

Note

The next section will be a good example of how to use grids.

Further Reading

Bootstrap Documentation