Bootstrap: colum offset

As mentioned before with Bootstrap it’s possible to combine multiple classes to design a responsive website. We can decide to use six columns on large screen and reduce the number of columns as we reduce the available screen size.

<section class="col-sm-6 col-md-4  col-lg-2"></section>

This means that on small screens the section will span 6 columns. We can specify an offset so that the single column on small screens will not go edge to edge:

<section class="col-xs-offset-3 col-sm-6 col-md-4  col-lg-2"></section>

This edit will work until the second breakpoint, because the offset will remain. We can cleaer it:

<section class="col-xs-offset-3 col-sm-6 col-sm-offset-0 col-md-4  col-lg-2"></section>

 

 

Advertisements