CODEWITHSUNDEEP
csstwitter-bootstrap
timhc22
timhc22

Reputation: 7451

Twitter Bootstrap mobile only columns

Is it possible to make 'mobile only' columns in Boostrap? i.e. a row of 4 becoming a row of 2 on smaller screens (3 * span4s becoming 2 * span6?). I know you can hide elements for mobile by adding .hidden-phone.

Zurb Foundation has phone-two etc classes which do this. http://www.zurb.com/article/859/fancy-mobile-layouts-with-the-foundation-

Will I need to write my own media queries to do this?

Upvotes: 1

Views: 3909

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25495

Bootstrap does not have the built-in equivalent of the classes you are asking about.

Here's an idea to get you started if you want to write your own: http://jsfiddle.net/panchroma/g6PRS/

CSS

@media (max-width: 767px) {
  .row-fluid.phone-two .span3 {
    width: 48%;
    margin-left: 4%;
    float:left;
  }

  .row-fluid.phone-two > .span3:nth-child(odd){
    margin-left: 0;
  }
}

HTML

<div class="container">
  <div class="row-fluid phone-two">
    <div class="span3">
      span3
    </div>
    <div class="span3">
      span3
    </div>
    <div class="span3">
      phone-two span3
    </div>
    <div class="span3">
      span3
    </div>
  </div>
</div>

Hope this is enought to get you going!

Upvotes: 2

Tali Luvhengo
Tali Luvhengo

Reputation: 359

Quick update bootstrap 3 now supports what you wanted to do here.

e.g

<div class='row'>
   <div class='col-xs-3 col-md-6'>
   </div>

   <div class='col-xs-3 col-md-6'>
   </div>

   <div class='col-xs-3 col-md-6'>
   </div>

   <div class='col-xs-3 col-md-6'>
   </div>
</div>

Havent tested this but should work. Should show 2 columns on mobile and 4 columns on desktop. More information http://getbootstrap.com/css/#grid

Upvotes: 1

Related Questions