CODEWITHSUNDEEP
csstwitter-bootstrap
James Wilson
James Wilson

Reputation: 809

How to tackle 3 floats with a column in Bootstrap?

I have the following 3 column layout on one of my pages using Bootstrap:

<div class="row">

    <div id="1" class="col-md-3">

        <div id="a">
        .. How can I make this 33% wide when the overal browser width is reduced?
        </div>

        <div id="b">
        .. How can I make this 33% wide and float next to the above?
        </div>

        <div id="c">
         .. How can I make this 33% wide and float next to the above?
       </div>


    </div>

    <div class="col-md-6">
    </div> 


    <div class="col-md-3">
    </div>

    </div>

</div>

When the browser width is reduced, div #1 instantly becomes the only column in view which I'd expect. But the 3 divs (a,b,c) within in it remain stacked on on top of another.

How can I make it so that the 3 columns within #1 each float next to each other at 33% width or 4 columns (in the grid of 12) wide to maximise the view on screen?

Can Bootstrap handle that?

SOLUTION - taking the example below and sligghtly modifying. The key here is the keep the nested divs full with for larger browser sizes:

<div class="row">
    <div id="1" class="col-md-3">
        <div class="row">
            <div id="a" class="col-md-12 col-sm-4 col-xs-6"">
            .. How can I make this 33% wide when the overal browser width is reduced?
            </div>

            <div id="b" class="col-md-12 col-sm-4 col-xs-6"">
            .. How can I make this 33% wide and float next to the above?
            </div>

            <div id="c" class="col-md-12 col-sm-4 col-xs-6"">
             .. How can I make this 33% wide and float next to the above?
           </div>
       </div>
    </div>
    <div class="col-md-6">
    </div> 
    <div class="col-md-3">
    </div>
</div>

Upvotes: 0

Views: 224

Answers (1)

theRyanMark
theRyanMark

Reputation: 710

Just wrap your 3 divs id a, b, and c in a row div. Then add a col-sm-4 class to your 3 divs id a, b, and c. See code below:

<div class="row">
    <div id="1" class="col-md-3">
        <div class="row">
            <div id="a" class="col-sm-4">
            .. How can I make this 33% wide when the overal browser width is reduced?
            </div>

            <div id="b" class="col-sm-4">
            .. How can I make this 33% wide and float next to the above?
            </div>

            <div id="c" class="col-sm-4">
             .. How can I make this 33% wide and float next to the above?
           </div>
       </div>
    </div>
    <div class="col-md-6">
    </div> 
    <div class="col-md-3">
    </div>
</div>

Hope this helps!

Upvotes: 1

Related Questions