CODEWITHSUNDEEP
htmltwitter-bootstrap
Crisan Raluca Teodora
Crisan Raluca Teodora

Reputation: 1293

Twitter bootstrap elements alignment

I have 4 blocks on a row that are displayed all on a single line on desktop, but when i resize the window (decrease the width), all the blocks will show on a diferent line. So i will get one column with 4 lines (4 elements) even though on one line can fit two elements.

I expect 2 lines with 2 elements insted of 4 lines with 1 element, to be more compact. How this can be done?

Here is the code:

<div class="content row">
    <section class="col col-lg-3">  
        <label>block 1</label>
    </section>
    <section class="col col-lg-3">  
        <label>block 2</label>
    </section>
    <section class="col col-lg-3">  
        <label>block 3</label>
    </section>
    <section class="col col-lg-3">  
        <label>block 4</label>
    </section>
</div>

Actual display: 

------   ------   ------   ------ 
|    |   |    |   |    |   |    |
|    |   |    |   |    |   |    |
------   ------   ------   ------

Display after resizing:

---------------------------------
|                               |
|                               |
---------------------------------
---------------------------------
|                               |
|                               |
---------------------------------
---------------------------------
|                               |
|                               |
---------------------------------
---------------------------------
|                               |
|                               |
---------------------------------

Needed display after resizing:

---------------   ---------------
|             |   |             |
|             |   |             |
---------------   ---------------
---------------   ---------------
|             |   |             |
|             |   |             |
---------------   ---------------

Mention: bootstrap v3.0.0

Upvotes: 1

Views: 55

Answers (2)

Marvin
Marvin

Reputation: 371

Try

<div class="content row">
    <section class="col col-lg-3 col-sm-6">  
        <label>block 1</label>
    </section>
    <section class="col col-lg-3 col-sm-6">  
        <label>block 2</label>
    </section>
    <section class="col col-lg-3 col-sm-6">  
        <label>block 3</label>
    </section>
    <section class="col col-lg-3 col-sm-6">  
        <label>block 4</label>
    </section>
</div>

Upvotes: 0

chris
chris

Reputation: 4867

Have you checked the Grid-Options? There are classes like "col-xs-6" or "col-xs-3" etc. I belive with this you can change the behaviour.

Upvotes: 1

Related Questions