One of the most complicated, but at the same time most useful topics using Bootstrap is its grid system: how to redistribute the spaces within a site or webapp. The system is based on containers, which in turn may contain more containers, and so on. The challenge is to avoid tables for web design (sometimes no choice but to use the tables, he he … but to present tabular data, not for a web design).
Containers
You have available 3 main classes: container, container-fluid y jumbotron.
The last one, jumbotron, is a class a class that is mainly used for titles, in fact, that you can see in the sample code. Container-fluid is another container class for adapting the maximum available width while container is limited and centered.
The grid
The main virtue of Bootstrap is the grid system, a collection of classes that changes everything in order to adapt the content to the resolution of the device, and in my opinion, is perhaps the most complicated parts of this framework, and whose features are:
- Is a grid
- Always work with 12 columns
- There is four types of grids, depending on the resolution’s device.
Depending on the size of the device and in order to give you an idea of sizes, in the following table you have the classes you need to use:
|
Extra small devices
e.g. phones
(< 768 px)
|
Small devices
e.g. tablets
(≥ 768 px)
|
Medium devices
e.g. laptops
(≥ 992 px)
|
Large devices
e.g. desktops
(≥ 1200 px)
|
|
|---|---|---|---|---|
| Container width | None (auto) | 750px | 970px | 1170px |
| Column class prefix | col-xs- | col-sm- | col-md- | col-lg- |
| Column width | Auto | 60px | 75px | 95px |
The fact that the screen is 12 columns is no coincidence, since you can always use 6 and 6 if you want to display from 2, or 4-4-4 if you want 3 columns, or 3-3-3-3 ifYou want four columns. Of course, you can use the composition you want, like 6-4-2 or 6-3-3, …. Best of all is that adaptation to any resolution is part of the work to be performed by Bootstrap and you don’t have to worry about it! Just select the correct class, which is based on:
- col, to indicate that is a column
- Size of the grid: xs, sm, md o lg
- Number of columns, from 1 to 12
So, if you need a distrobution of columns like 6-3-2-1, you need the following classes col-md-6, col-md-3, col-md-2 y col-md-1.
By default, it always use 12 columns, all available width.
But ¿what if I have more than 12 columns? Easy, go to next now.
Undoubtedly, this behavior is a real advantage for the design of front-end of a web or app, with good design device independent. Yuo can learn more about grids, by reading this article.
Themes for Bootstrap
Although the original colors of Bootstrap are closely related to its creators, Twitter, maybe you would like to have a different selection of colours. In order to get that, the best alternative I know is to select a theme from http://bootswatch.com/. Just download the Bootstrap.css or Bootstrap.min.css files, replace files, and … you’re done! Your app with a new style!
And … that’s all, by now!