Twitter Bootstrap - why row class has margin-left: -20px?

Question

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>

example

http://stackoverflow.com/questions/18969051/bootstrap-3-why-is-row-class-is-wider-than-its-container — Yagiz Ozturk, Dec 10 '13 at 08:55

score 14 · Accepted Answer · answered Jul 02 '13 at 21:39

14

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>

answered Jul 02 '13 at 21:39

mauteri

531
3
7

My library is bootstrap v3.2.0, doesn't have a class named row-fluid. Am I missing something? – hasany Oct 18 '21 at 15:58
@hasany See answer above mine for Bootstrap 3. – mauteri Oct 19 '21 at 19:29

score 3 · Answer 2 · answered Feb 07 '14 at 23:32

For people trying to find this out for Bootstrap 3:

Grids and full-width layouts Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows.

Source (search for Grids and full-width layouts)

Twitter Bootstrap - why row class has margin-left: -20px?

2 Answers2