How to use responsive Bootstrap system

You basically add a class to your html element.

For grids the class structure is:

.col-tamanhoDaTela-EspaçoASerOcupado

.col-sm-1 /*ocupa 1 espaço em telas pequenas*/

The bootstrap grid is based on 12 spaces, so if you give the class .col-sm-6 to an element, it will occupy half the line in a small resolution.

The middle two letters represent the size of the screen, in the documentation table you can see better, but simplifying :

xs = extra small = very small / cellular.

sm = small = small / tablet

md = medium = medium / notebooks and pcs with smaller screens

lg = large = large / notebooks and pcs with large screens

You can also use classes that define whether or not the element is visible and what its behavior is.

Ex:

.visible-sm-block /* vai ser visível como um elemento tipo bloco em telas pequenas */

The structure is:

.visivelOuEscondido-TamanhoDaTela-Comportamento

Since the behavior part is optional.

The documentation has two very nice tables:

link

link