CODEWITHSUNDEEP
csstwitter-bootstrap
amagumori
amagumori

Reputation: 697

Bootstrap 3 Fluid Grid Issues

having trouble with laying out a fluid column layout in bootstrap 3.

the structure of the HTML elements looks like this:

div.container-fluid
  div.row.upperrow
  div.row.contentrow
    div.col-lg-3
    div.col-lg-1
    div.col-lg-5
    div.col-lg-3

even the first 3 divs, which only add up to 9/12 of the 12-column layout, are much wider than the page. the div.col-lg-5 easily takes up 70% of the row (not 5/12). the div.col-lg-3 is pushed under the first 3 divs as they are too wide.

what could be the problem here?

Upvotes: 0

Views: 228

Answers (2)

user3127896
user3127896

Reputation: 6563

Look at this fiddle. Here is how it works.

<div class="container-fluid">
    <div class="row">
        <p class="text-center">Here is a row</p>
    </div><br/>
    <div class="row">
        <div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
        <div class="col-2 col-sm-1 col-lg-2 col">Col 2</div>
        <div class="col-4 col-sm-5 col-lg-4 col">Col 4</div>
        <div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
    </div>
</diV>

Upvotes: 1

timo.rieber
timo.rieber

Reputation: 3867

As stated at http://getbootstrap.com/css/:

Content should be placed within columns, and only columns may be immediate children of rows.

Your layout has a row as child from another row. Put another col-12 in between or remove one row.

Upvotes: 1

Related Questions