CODEWITHSUNDEEP
twitter-bootstrap
Syed Khan
Syed Khan

Reputation: 261

How to change number of column in a row on resize - Bootstrap

I need some help to change number of columns in a row dynanamically when resizing window. For example, for large and medium screen, there should be 3 columns in a row, for small there should be 2 and for extra small only 1 column

Something like this

For large and medium

{col-1}{col-2}{col-3}

{col-4}{col-5}{col-6}

For small

{col-1}{col-2}

{col-3}{col-4}

{col-5}{col-6}

and similar for extra small

What I have done now is made a row and put 3 columns in it

<div class="row">
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 1
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 2
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 3
    </div>
</div>
<div class="row">
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 4
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 5
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 6
    </div>
</div>

but using this trick, on small screen it show 2 column in a row, and in next row just 1 column

{col-1}{col-2}

{col-3}

{col-4}{col-5}

{col-6}

Can anybody please help me to get this fixed.

Thanks

Upvotes: 4

Views: 4791

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362380

This is a good example of when to use Bootstrap's column wrapping.

Put all of the columns in 1 .row...

http://www.codeply.com/go/zyTOcNXo0m

<div class="row">
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 1
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 2
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 3
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 4
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 5
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 6
    </div>
</div>

http://www.codeply.com/go/zyTOcNXo0m

Upvotes: 3

Momin
Momin

Reputation: 3320

Responsive Grid view for bootstrap 

 <div class="container">
      <div class="row">
         <div class="col-lg-4 col-sm-6 col-xs-12"></div>
         <div class="col-lg-4 col-sm-6 col-xs-12"></div>
         <div class="col-lg-4 col-sm-12 col-xs-12"></div>
      </div>
 </div>

Upvotes: 1

Related Questions