CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
ahnbizcad
ahnbizcad

Reputation: 10797

bootstrap full width element height under row

I need an element to take the entire screen's width.

Thus, I put it under .row like so because .container adds 15 px padding, then .row takes it away to be full width again. 

.container-fluid
  .row
    header  
      .col-xs-12
        "content content content"

But when I inspect the header element, its height is 0.

How do I get it to automatically be the height of the contents of .col-xs-12 without hard-coding the pixel values or using javascript?

Upvotes: 0

Views: 364

Answers (1)

meniltiac
meniltiac

Reputation: 91

So a few things:

First of all, as per Bootstrap's docs, "only columns may be immediate children of rows." If you are going to add a header element, make it a parent element of the .row or the .container, or put it within the .col-xs-12.

All .col-xx-xx divs float left, so they are technically taken out of the page flow, which is why your header element has no height--the browser doesn't see its contents as affecting the flow of the page, so it doesn't believe it has a height. Using Bootstrap, you can add the .clearfix class to fix this, though I suggest making sure that you clean up your Bootstrap layout a bit first.

EDIT: Also (and I suppose this should go without saying, but since your code is sparse -- and in haml?--, I want to make sure that it's true), if your .col-xs-12 has no content in it yet, you won't have a height because there's no minimum height set on a .col-xx-xx divs.

<div class="container-fluid">
      <div class="header">
           <div class="row">
                <div class="col-xs-12">
                     CONTENT HERE
                </div>
           </div>
      </div>
 </div>

I hope this helps!

Upvotes: 2

Related Questions