CODEWITHSUNDEEP
htmltwitter-bootstrap
Otachan
Otachan

Reputation: 89

How to make bootstrap columns with images responsive

For example if I have

<style type="text/css">
#box{
    height: 130px;
    background-color: red;
    margin: 10px;
}
</style>
<div class="row">
    <div class="col-md-4">
        <div id="box"></div>
    </div>
    <div class="col-md-4">
        <div id="box"></div>
    </div>
    <div class="col-md-4">
        <div id="box"></div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div id="box"></div>
    </div>
    <div class="col-md-4">
        <div id="box"></div>
    </div>
    <div class="col-md-4">
        <div id="box"></div>
    </div>
  </div>

That will looked like

   box     box     box    
   box     box     box

Then after the window is resize it will become like this 

   box  
   box
   box
   box
   box
   box

What I want is if I resize the window to lets say width of 766 pixels it will become like this

   box     box
   box     box 
   box     box

Then after a smaller window then it will become like

   box  
   box
   box
   box
   box
   box

I want it to be like 3 transformation.

Upvotes: 2

Views: 53

Answers (2)

roberrrt-s
roberrrt-s

Reputation: 8210

Bootstraps build-in column system automatically takes care of this issue in case of a single row. I changed your code to work accordingly.

col-md-4: On medium screens, use 4 columns of the basic 12(suits 3)

col-sm-6: On small media, use 6 columns of the basic 12(suits 2)

col-xs-12: On tiny media, use 12 columns of the basic 12 (suits 1)

<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
</div>

Upvotes: 1

Mandarr Sant
Mandarr Sant

Reputation: 455

Use media queries provided by bootstrap follow the link below

Media queries

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Upvotes: 0

Related Questions