CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
w00tw00t111
w00tw00t111

Reputation: 359

Twitter Bootstrap (Responsive) - Additional Column After Certain Min Width

I'm working with Twitter Bootstrap and using a fluid design with media queries to make it a responsive design.

So far, I have the design working to be "responsive" with a sample 2 column layout. However, what I need to do is after 1200px min-width add an additional sidebar column.

So if my 1024 layout has:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
              .....
        </div>
        <div class="span4 last">
              ..sidebar junk..
        </div>
    </div>
</div>

I would need the 1200px version to effectively be something like:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6">
              .....
        </div>
        <div class="span3">
              ..sidebar junk..
        </div>
        <div class="span3 last">
              ..sidebar 2 junk..
        </div>

    </div>
</div>

Or something to that effect. And then when the user scaled back down below 1200px, remove that second span3 and make the 1st span3 a span4 again. See http://www.smashingmagazine.com/ for a very complex version of what I am asking about. As you increase screen resolution, side bars are added for content.

How are we to achieve this effect with Bootstrap?

Upvotes: 3

Views: 1934

Answers (2)

Juan Casares
Juan Casares

Reputation: 348

I've been struggling wit this too. You can play with the column spans to simulate this. For 3 columns set the span to 4 (12/4=3) and for 4 columns to 3.

You get more granularity with a larger total number of columns, say 24 instead of 12. See the example below with styles for small and large columns at multiple screen sizes:

@grid-columns: 24; 

.small-column {
    .make-xs-column(12); // 2 small columns at xs size (24/2)
    .make-sm-column(6);  // 4 small columns at sm size (24/6)
    .make-md-column(4);  // 6 small columns at md size (24/4)
    .make-lg-column(3);  // 8 small columns at lg size (24/4)
}

.large-column {
    .make-xs-column(24);
    .make-sm-column(12);
    .make-md-column(8);
    .make-lg-column(6); 
}

Upvotes: 0

baptme
baptme

Reputation: 10092

=Quite easy to do with a bit of jQuery.

Add and id to your divs and add/remove span classes and css on ready and resize.

<div class="container-fluid">
  <div class="row-fluid">
    <div id="one">
      .....
    </div>
    <div id="two">
      ..sidebar junk..
    </div>
    <div class="span3" id="three">
      ..sidebar 2 junk..
    </div>
  </div>
</div>

&

function sizing() {
  var windowwidth=$(window).width();
  if(windowwidth>=1200){
    $('#one').removeClass('span8').addClass('span6');
    $('#two').removeClass('span4').addClass('span3');
    $('#three').css('display','inline');
  } else {
    $('#one').removeClass('span6').addClass('span8');
    $('#two').removeClass('span3').addClass('span4');
    $('#three').css('display','none');
  }          
}
$(document).ready(sizing);
$(window).resize(sizing);

http://jsfiddle.net/baptme/9MYTZ/4/

Upvotes: 7

Related Questions