I don't understand why row class has margin-left: -20px
(so it grows after parents border like on the image). I think nobody needs this behavior. Or am I doing something wrong?
<div class="container">
<div id="top-container" class="row">
<div class="span8">
<h1>App</h1>
</div>
<div class="span4">
</div>
</div>
</div>
Rows have a negative left/right margin of -15px. The Container padding of 15px is used to counteract the negative margins of the Row. This is to keep content evenly aligned on the edges of the layout. If you don't put a Row in a Container, the Row will overflow it's container, causing an undesirable horizontal scroll.
Use the . align-items-center class in Bootstrap to align single rows of items in the center.
The gutters between columns in our predefined grid classes can be removed with .g-0 . This removes the negative margin s from .row and the horizontal padding from all immediate children columns.
You can use row-fluid instead of row, then your span4 and span8 won't have margin-left.
<div class="container">
<div id="top-container" class="row-fluid">
<div class="span8">
<h1>App</h1>
</div>
<div class="span4">
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With