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

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s