Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 .col-xs-offset-* doesn't work?

I am using bootstrap 3 grid system loved it so far and everything was working well, I am trying to use col-xs-offset-1 and doesn't work although .col-sm-offset-1 works. What am I missing here ?

<div class="col-xs-2 col-xs-offset-1">col</div> 

http://jsfiddle.net/petran/zMcs5/2/

like image 563
Petran Avatar asked Sep 17 '13 15:09

Petran


People also ask

Why is Col XS not working?

In our example code at the top of the page, col-xs-* did not work as expected. The reason was because of versions conflict. We were using bootstrap version 5, where that class is not supported. If we used exactly the same code on Bootstrap 3, it would work perfectly well with no issues.

How do I fix Col Md offset in Bootstrap?

Since bootstrap 4, the col-*-offset-* class was replaced with offset-*-* where the first * is the responsiveness (sm, md, lg, etc) and the second * is the number of columns (eg. 1, 2, 3, etc). To fix it for bootstrap 4 and 5, simply change the class to offset-md-* .

What is offset 3 in Bootstrap?

offset-md-3 which will offset the desired column element with 3 columns to the right from its default position on medium screen sizes and above. . offset classes always shifts its content to the right. This all stuff produced results .

How do I offset in Bootstrap?

An offset is used to push columns over for more spacing. To use offsets on large displays, use the . col-md-offset-* classes.


2 Answers

Edit: as of Bootstrap 3.1 .col-xs-offset-* does exist, see bootstrap :: grid options


.col-xs-offset-* doesn't exist. Offset and column ordering are only for small and more. (ONLY .col-sm-offset-*, .col-md-offset-* and .col-lg-offset-*)

See the official documentation : bootstrap :: grid options

like image 54
bobybx Avatar answered Oct 03 '22 04:10

bobybx


Alternatively, you can add an empty div for the xs-offset (would save you having to manage the content in more than one place)

<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div> 

The bootstrap devs seem to be refusing to add those xs- ofsets and push/pull classes, see here: https://github.com/twbs/bootstrap/issues/9689

like image 24
Anna T Avatar answered Oct 03 '22 05:10

Anna T