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/
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.
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-* .
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 .
An offset is used to push columns over for more spacing. To use offsets on large displays, use the . col-md-offset-* classes.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With