Friday, February 3, 2017

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

Leave a Comment

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/

13 Answers

Answers 1

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

Answers 2

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

Answers 3

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" 

Answers 4

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> 

Answers 5

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.

Bootstrap 3 xs offset shim

Answers 6

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

Answers 7

  /*    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

Answers 8

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

Answers 9

// 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

Answers 10

The problem is that you're putting .name class instead of nameclass

Answers 11

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 .

Answers 12

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> 

Answers 13

Remove the dot in front of your class so it looks like this:

<div class="col-xs-2 col-xs-offset-1">col</div> 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment