CODEWITHSUNDEEP
csstwitter-bootstrap
Pragmatic
Pragmatic

Reputation: 3127

Bootstrap Grid with (3 column for large, 2 for medium and 1 column for small)

I am new to bootstrap, so please excuse me if a asking a stupid question. I want to create a create that will have 3 columns on large devices, 2 on medium devices and 1 column on small devices.

I used following code to achieve this

        <div class="row" > 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
            <div class="clearfix visible-md">
            </div> 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
        </div>

        <div class="row" > 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
            <div class="clearfix visible-md">
            </div> 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
        </div>

It works fine for Large and small layout. But on medium layout, there use to be a blank space in each alternative row. (which I don't want). I want it to be totally fluid.

Upvotes: 0

Views: 296

Answers (3)

Sarower Jahan
Sarower Jahan

Reputation: 1495

Just use this system...

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

Upvotes: 0

maniac coder
maniac coder

Reputation: 183

You are using col-md-6 for three 

<div>

which is causing it to overflow as the column size is fixed to 12 in bootstrap. You have also added extra row after four

<div>.

Since one of them is empty you are getting empty space at medium size. To overcome this you can define all of your code under one 

<div class= "row">

and remove the empty

<div class="clearfix visible-md">
</div>

like this:- 

    <div class="row" > 
        <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 
        <div class="col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 

        <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 
        <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 
        <div class="col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 

        <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p> 
        </div> 

    </div>
</div>

You can also look at the documents of bootstrap Understanding grids

Upvotes: 1

wahwahwah
wahwahwah

Reputation: 3177

Every col size has a max total value of 12 per row. So:

<div class="col-lg-4 col-md-6 col-sm-12"></div>
<div class="col-lg-4 col-md-6 hidden-sm"></div>
<div class="col-lg-4 hidden-md hidden-sm"></div>

Per row:

  • Large 12/4 = 3
  • Medium 12/6 = 2
  • Small 12/12 = 1

Will render 3 columns on large, 2 columns on medium and 1 column on small (in one row). This might not help you specifically with the design issues you're encountering, but this is how the logic operates with the media queries in bootstrap.

hidden-*

Will hide that specific column when the viewport matches the conditions. Also,

col-md-offset-*

Can be useful for nudging your cols over without adding empty divs.

A fiddle showing this in action (including xs size)

Docs

HTH

Upvotes: 0

Related Questions