Otachan Otachan - 3 months ago 9
HTML Question

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.

Answer

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>
Comments