CODEWITHSUNDEEP
csstwitter-bootstraplessresponsive-design
C. E.
C. E.

Reputation: 10627

Bootstrap, making responsive changes to layout

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?

Upvotes: 13

Views: 41975

Answers (8)

ono2012
ono2012

Reputation: 5267

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>

Upvotes: 3

asad raza
asad raza

Reputation: 432

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>

Upvotes: 3

Daniel Faria
Daniel Faria

Reputation: 1484

just:

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

Upvotes: 0

Malte Schulze-Boeing
Malte Schulze-Boeing

Reputation: 1145

This would be the best option to keep it dynamic. In my example I have width set to 6 columns next to fluidGridColumnWidth

[class*="span"]  {
    width: 100%;

    .row-fluid {
        [class*="span"] {
            width: (@fluidGridColumnWidth * 6) + (@fluidGridGutterWidth * (6 - 1)) - (.5 / @gridRowWidth * 100 * 1%);

            float: left;
            margin-left: @fluidGridGutterWidth;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}

Upvotes: 3

John
John

Reputation: 337

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.

Upvotes: 0

George Filippakos
George Filippakos

Reputation: 16569

If using bootstrap 2.2.1 you can:

Change the html to:

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

Now add this to your css overrides:

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

This will also work for any other span widths you have specified in your html.

the effect of these changes makes all span widths 100% causing the iPad to always use 1 column fluid mode in portrait mode.

Upvotes: 6

Gert-Jan van de Streek
Gert-Jan van de Streek

Reputation: 437

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;
    }
}

Upvotes: 24

will
will

Reputation: 4575

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;
    }

}

Upvotes: 13

Related Questions