CODEWITHSUNDEEP
csstwitter-bootstrap
Francesca
Francesca

Reputation: 28148

Bootstrap: Floated divs cause parent elements to collapse. Best way to structure nested columns?

I'm really struggling with Bootstrap regarding the way it handles divs.

It seems to me, that all column classed divs using Bootstrap CSS are floated. For example:

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

This above div has the style: float: left; as defined in Bootstrap CSS.

Now everyone knows about the issue with floating, it causes the parent div to not expand to the height because it doesn't 'see' floated elements as pushing out the container.

I feel like this is a serious flaw in Bootstrap. I have some classes to add margin to divs, for example:

.full-buffer{margin:20px 0}

If I want to use this class on a div that wraps a number of Bootstrap columns, it doesn't work. Because the div has no height. If I wanted to add a background colour, it won't show up. For example:

.background-coloured-div{background-color:#0F0;}

 <div class="background-coloured-div">
                <div class="col-md-3">
                    property
                </div>
                <div class="col-md-3">
                    property
                </div>
                <div class="col-md-3">
                    property
                </div>
                <div class="col-md-3">
                    property
                </div>
            </div>

The above won't show any background colour, because all of the divs inside are floated, so it'll collapse to 0px in height.

JSFiddle without bootstrap

JSFiddle with bootstrap - fixes one problem and causes another

So, what's the proper way to use Bootstrap columns? If everything is floated, how can you add proper margins, background colours etc to parent divs? Isn't this a massive flaw of the whole system?

Upvotes: 0

Views: 1369

Answers (3)

katwhocodes
katwhocodes

Reputation: 2268

  1. Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  2. Use rows to create horizontal groups of columns.
  3. Content should be placed within columns, and only columns may be immediate children of rows.

In your case, the code should be:

<div class="container-fluid">
  <div class="row background-coloured-div">
    <div class="col-md-3">
      property
    </div>
    <div class="col-md-3">
      property
    </div>
    <div class="col-md-3">
      property
    </div>
    <div class="col-md-3">
      property
    </div>
  </div>
</div>

Upvotes: 1

robabby
robabby

Reputation: 2200

You'll want to wrap those cols in a .row div to contain the floats.

Don't forget to also contain that row in a .container or .container-fluid to counter balance the -15px margin applied to .row.

<div class="container-fluid">
    <div class="background-coloured-div row">
      <div class="col-md-3">
        property
      </div>
      <div class="col-md-3">
        property
      </div>
      <div class="col-md-3">
        property
      </div>
      <div class="col-md-3">
        property
      </div>
    </div>
</div>

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

If for whatever reason you don't want to use a .row, you could add the following to your css to contain the floats of that divs children, but I recommend using Bootstraps solution:

background-coloured-div:after {
   content:'';
   display:table;
   clear:both;
}

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115108

Bootstrap has a row class that contains the floats using:

.row:before {
    display: table;
    content: " ";
}


.background-coloured-div {
  background-color: #0F0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="background-coloured-div row">
  <div class="col-md-3">
    property
  </div>
  <div class="col-md-3">
    property
  </div>
  <div class="col-md-3">
    property
  </div>
  <div class="col-md-3">
    property
  </div>
</div>

Upvotes: 2

Related Questions