CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Karl Wong
Karl Wong

Reputation: 605

Bootstrap grid distorted

<div class="container">
    <div class="row">
        <div class="col-md-3" style="height:100px; background-color:#000000; padding:3px; border:2px solid grey; color:#ffffff">1</div>
        <div class="col-md-3" style="height:300px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">2</div>
        <div class="col-md-3" style="height:150px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">3</div>
        <div class="col-md-3" style="height:40px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">4</div>
        <div class="col-md-3" style="height:120px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">5</div>
        <div class="col-md-3" style="height:130px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">6</div>
        <div class="col-md-3" style="height:190px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">7</div>
        <div class="col-md-3" style="height:121px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">8</div>
        <div class="col-md-3" style="height:30px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">9</div>
        <div class="col-md-3" style="height:90px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">10</div>
    </div>
</div>

Im trying to make a grid that looks like a table, the div class='col-md-3' is dynamically generated.

It should look like a table which each row has only 4 columns. Because of the uneven heights, the image would stack together not looking like a table.

Is there a problem with the code? Result: https://i.sstatic.net/1hNPs.png

Upvotes: 0

Views: 820

Answers (2)

Ankit Chauhan
Ankit Chauhan

Reputation: 72

Because of the different column sizes, it happens so. This can be fixed by:

<div class="row" style="display:flex; flex-wrap:wrap;">
    ...
</div>

Upvotes: 2

Kiran
Kiran

Reputation: 121

In bootstrap total number of columns are 12 in a row,only 4 col-md-3 can be placed in one row

http://getbootstrap.com/css/#grid-example-basic

<div class="container">
    <div class="row">
        <div class="col-md-3" style="height:100px; background-color:#000000; padding:3px; border:2px solid grey; color:#ffffff">1</div>
        <div class="col-md-3" style="height:300px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">2</div>
        <div class="col-md-3" style="height:150px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">3</div>
        <div class="col-md-3" style="height:40px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">4</div>

    </div>

    <div class="row">
 <div class="col-md-3" style="height:120px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">5</div>
        <div class="col-md-3" style="height:130px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">6</div>
        <div class="col-md-3" style="height:190px; background-color:#000000; padding:3px; border:2px solid grey;color:#ffffff">7</div>
        <div class="col-md-3" style="height:121px; background-color:#FFA444; padding:3px; border:2px solid grey;color:#ffffff">8</div>


    </div>
</div>

Upvotes: 2

Related Questions