Bootstrap, making responsive changes to layout

Question

I'm using a fluid Twitter Bootstrap layout for my design and am about to make it responsive. Consider a grid such as this:

<div class="row-fluid">
    <div class="span4"></div>
    <div class="span8"></div>    
</div>

What is the best way to hide span4 and let span8 take up the entire width, to be used when the screen gets smaller?

Answer 1

With bootstrap 2.0.2 and up you can:

Change the html to:

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8 span12-tablet"></div>    
</div>

(I interpreted 'smaller' with tablet and phone sizes, use your own definitions for other sizes)

.hidden-phone and .hidden-tablet hide the span4 for smaller screens.

To reclaim that space and re-span the span8, add this to your css:

@media (max-width: 979px) {
  .span12-tablet {
    width: 91.48936170212765% !important;
    *width: 91.43617021276594% !important;
  }
}

If you happen to be using less you can use bootstrap's grid mixins:

.span12-tablet {
    @media (max-width: 979px) {
        #grid > .fluid > .span(12) !important;
    }
}

Answer 2

Write Like this

in phone device this div will hide<div class="span4 hidden-phone"></div>

and this div will show <div class="span8 visible-phone"></div>

Update

Previous Answer for Bootstrap 2.3

Now bootstrap 3 come in market..

so i update my answer for new user → bootstrap3

in phone device this div will hide<div class="col-md-4 hidden-xs"></div>

and this div will show <div class="col-xs-4 visible-xs"></div>

Answer 3

TLDR: Use the 2nd code snippet

Bootstrap is a mobile first framework so I'll explain from the smallest screen-size up. The layout is always 12 columns wide regardless of breakpoints/screen-size.

Starting from the smallest breakpoint (xs - extra small), the span4 is hidden and the span8 takes all of the width (all 12 columns)

<div class="row-fluid">
    <div class="span4 hidden-xs"></div>
    <div class="span8 col-xs-12"></div>    
</div>

We are not quite done yet as we haven't defined behavior when the next breakpoint up is hit (sm/small/screen width is over 767px), so we'll make span4 take a third of the width (12 columns/3 = 4 columns) and the span8 will take the rest of the width (12-4= 8 columns)

<div class="row-fluid">
    <div class="span4 hidden-xs col-sm-4"></div>
    <div class="span8 col-xs-12 col-sm-8"></div>    
</div>

The above assumes you wanted the change to happen on the change between the xs - sm breakpoints.

Further reading:

If you wanted the change between sm-md (md = medium) then I might use the visible-md class which will show the span4 on breakpoints medium and up (>992px)

<div class="row-fluid">
    <div class="span4 visible-md col-md-4"></div>
    <div class="span8 col-xs-12 col-md-8"></div>    
</div>

Answer 4

just:

<div class="row-fluid">
   <div class="span4 hidden-desktop"></div>
   <div class="span8"></div>    
</div>

Answer 5

Using a media query with whatever min/max width set .span4 to display: none;

Then, add .span8 to the rule for .span12 for everything below whatever width you hide .span4 as all that work is already done for you by bootstrap, so no need to duplicate. It will look something like this:

@media (min-width: 320px){
    .span12,
    .span8 {
        width: 300px;
    }
}

(That last bit of code is just an example, but there will be something like it in bootstraps scaffolding.)

Hope that helps :)

EDIT:

This could work, I tested it using dev tools on the bootstrap site and it seemed to work. Again, in a media query:

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

    #special .span8 {
        float: none;
        width: auto;
    }

}

Answer 6

I came up with a small variation of that.

Add stack-tablet class to a row-fluid to make the spans stack on tablet width, not only on phone width (bootstrap default):

@media (max-width: 979px) {
    .row-fluid.stack-tablet [class*="span"] {
        width: 100%;
        display: block;
        float: none;
        margin-left: 0;
    }
}

Can be used together with the display- and hidden- classes.