Reputation: 8087
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/
Upvotes: 81
Views: 207351
Reputation: 2581
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.
Upvotes: 2
Reputation: 6347
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.
Upvotes: 0
Reputation: 224
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.
Upvotes: 1
Reputation: 1490
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>
Upvotes: 0
Reputation: 5039
// 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
Upvotes: 0
Reputation: 51
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 .
Upvotes: 0
Reputation: 347
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
Upvotes: 6
Reputation: 609
/*
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;
}
}
https://gist.github.com/dylanvalade/7362739
Upvotes: 2
Reputation: 479
Remove the dot in front of your class so it looks like this:
<div class="col-xs-2 col-xs-offset-1">col</div>
Upvotes: -3
Reputation: 121
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>
Upvotes: 6
Reputation: 11
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
Upvotes: 1
Reputation: 1024
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
Upvotes: 100
Reputation: 3366
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"
Upvotes: 12
Reputation: 955
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
Upvotes: 26
Reputation: 5605
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.
Upvotes: 3