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>
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>
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
You could get the offset set only for xs devises by negating the higher pixels with 0 offset. Like so,
class="col-xs-offset-1 col-md-offset-0"
A suggestion for when you want to do an offset but find yourself incapable at extra small widths:
Use .hidden-xs
and .visible-xs
to make one version of your html block for extra small widths, and one for everything else (where you can still use an offset)
Example:
<div class="hero container">
<div class="row">
<div class="hidden-xs col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4 text-center">
<h2>This is a banner at the top of my site. It shows in everything except XS</h2>
<p>Here are some supporting details about my banner.</p>
</div>
<div class="visible-xs col-xs-12">
<h2 class="pull-right">This is my banner at XS width.</h2>
<p class="pull-right">This is my supporting content at XS width.</p>
</div>
</div>
</div>
col-md-offset-4 does not work if you manually apply margin to the same element. For example
In the above code, offset will not be applied. Instead a margin of 0 auto will be applied
This was really frustrating so I wrote a gist you can grab that enables col-offset-xs-*
. I also noticed that Bootstrap SASS repo Bower installed this week did not include col-offset-sm-0
so that is shimmed too but will be redundant in many cases.
/*
Include this after bootstrap.css
Add a class of 'col-xs-offset-*' and
if you want to disable the offset at a larger size add in 'col-*-offset-0'
Examples:
All display sizes (xs,sm,md,lg) have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-sm-3">
xs has an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-sm-offset-0 col-sm-3">
xs and sm have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-md-offset-0 col-sm-3">
xs, sm and md will have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-lg-offset-0 col-sm-3">
*/
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666666666666%;
}
.col-xs-offset-10 {
margin-left: 83.33333333333334%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666666666666%;
}
.col-xs-offset-7 {
margin-left: 58.333333333333336%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666666666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.666666666666664%;
}
.col-xs-offset-1 {
margin-left: 8.333333333333332%;
}
.col-xs-offset-0 {
margin-left: 0;
}
/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
@media (min-width: 768px) {
.col-sm-offset-0,
.col-md-offset-0,
.col-lg-offset-0 {
margin-left: 0;
}
}
As of Boostrap 4.x, just as col-xs-6 is now just col-6
offset-xs-6 is now just offset-6 (and col-lg-offset-2
is now offset-lg-2
).
Already tried it, definitely works.
Its not working because col-xs-offset-*
is mentioned out of the media query. if you want to use it, you have to mention all the offset (eg: class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0"
)
But this is not right, they should mention col-xs-offset-*
in the media query
The bootstrap css used in the jsfiddle link, dont have the css for col-xs-offset-*, thats why the css are not been applied. Refer the latest bootstrap css.
instead of using col-md-offset-4 use instead offset-md-4, you no longer have to use col when you're offsetting. In your case use offset-xs-1 and this will work. make sure you've called the bootstrap.css folder into your html as follows .
// it works in bootstrap 4, there was some changes in documentation.We dont need prefix col-, just offset-lg-3 e.g.
<div class="row">
<div class="offset-lg-3 col-lg-6"> Some content...
</div>
</div>
// here doc: http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns
As per the latest bootstrap v3.3.7 xs-offseting is allowed. See the documentation here bootstrap offseting. So you can use
<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>
Just in case someone makes the same error I did before stumbling on this page, that is, adding CSS
reset rules (like the very popular reset by Eric Meyer used on millions of websites) after including bootstrap.
Also, perhaps I should point out that such reset won't be necessary with bootstrap given bootsrap actually implements the normalize.css v3.0.2 reset.
Remove the dot in front of your class so it looks like this:
<div class="col-xs-2 col-xs-offset-1">col</div>