How to use Bootstrap responsive system

Asked

Viewed 661 times

5

I would like to know how I use only the responsive design part of Bootstrap and if possible give me some tips on how to apply in HTML code.

  • Here you can find and resolve your questions on how to start using bootrstrap: http://getbootstrap.com/getting-started/

  • what exactly you want to use of Bootstrap: Grid, images, some component, only the visibility classes?

1 answer

3

Basically you 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 for an element, it will occupy half the line in a small resolution.

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

Xs = extra small = very small/mobile.

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 the element is visible or not 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

The behavior part is optional.

The documentation has two tables very cool:

http://getbootstrap.com/css/#Responsive-Utilities

http://getbootstrap.com/css/#grid-options

Browser other questions tagged

You are not signed in. Login or sign up in order to post.