CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Surya Kasturi
Surya Kasturi

Reputation: 4753

How to do padding on a fluid row in twitter bootstrap

<div class="internal-wrapper row-fluid">
        <div class="Header span12"> 
                <div class="HeaderTitle span6"></div>
                <div class="span6"></div>
        </div>
</div>

Now, when I do padding on internal-wrapper, I am expecting the padding to effect on the entire grid! inside it. But an overflow is occurring (I think, the right padding is not working)

.internal-wrapper {
     padding-left: 30px;
     padding-right: 30px;
}

enter image description here

The blue bar below represents Header class. The green box, represents padding! So, Its happening on left but not right

Upvotes: 7

Views: 17488

Answers (2)

Dan Blows
Dan Blows

Reputation: 21184

.row-fluid is 100% width. Because it's using a border-box layout, any padding you put is added to that 100%. See http://paulirish.com/2012/box-sizing-border-box-ftw/. However, setting it to use the content-box model will probably cause other problems in Bootstrap.

How to fix it - add an inner element with the padding.

<div class="row-fluid">
  <div style="padding-left: 30px; padding-right: 30px;">
     ...
  </div>
</div>

Upvotes: 16

isherwood
isherwood

Reputation: 61083

I can't see (or discern) from your post what's wrong, but here's my guess: By placing padding on an element that Bootstrap sizes, you've altered its width. Try putting margin on .Header instead.

If this doesn't help, please create a demo: http://jsfiddle.net/

Upvotes: 0

Related Questions