Why does the bootstrap .row class have a default margin-left of -30px?

Question

When I do boostrap I have to use the class "row" ...

When you look at my test design:

enter image description here

Why I am forced with a margin-left of -30px?

With this html I would expect 3 rows sharing each column 33% of the whole available width:

<div class="container">
    <div class="row">
        <div style="background-color: pink;" class="span4">
            This is a label
        </div>
        <div style="background-color: violet;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: slateblue;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: orange;" class="span4">
            This is a label
        </div>
        <div style="background-color: orangered;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: yellow;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: seagreen;" class="span4">
            This is a label
        </div>
        <div style="background-color: green;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: lightgreen;" class="span4">
            This is a button
        </div>
    </div>    

</div>

The gray area with the buttons is from this code:

<div style="background-color: gray;">
    <div class="pager">
        <div class="pull-left">
            <a href="#" class="btn" data-bind="css: { disabled: !hasPrevious() }, click: previous">previous</a>
            <a href="#" class="btn" data-bind="css: { disabled: !hasNext() },     click: next">next</a>
        </div>
        <div class="pull-right">
            <span data-bind="text: stepNumber()" />
            <span>/</span>
            <span data-bind="text: stepsLength" />
        </div>
    </div>
    <hr />

    <!-- ko compose: { model: activeStep,
        transition: 'entrance' } -->
    <!-- /ko -->
</div>

Why does the whole 3-column design fall together when I remove the -30px margin-left?
How should I change my code to really get a 3 column layout each column having the same width. This is what span4 should do.

that is the gutter. you can change that in the less source files but you'll need to rebuild after you change it. There are different gutters based on various media queries. — origin1tech, May 22 '13 at 19:09
I like bootstrap and use it all the time. There are certain concessions I find using it. In fact rather than chop up the source (the less itself) I tend to override or just concede to use as intended. The web is moving toward continuity over granular control. Users care less about elaborate layouts and more about speed and functionality. Say as you will but bootstrap aids greatly in that continuity. — origin1tech, May 26 '13 at 16:36

oezi · Accepted Answer · 2017-11-10T16:04:06.537

question 1:

the spans all have a margin-left of 30px to create some space between the single blocks. this space should only appear between the single spans and not at the beginning (or end) of the row. to accomplish this, there are several possibilitys - for example:

create a negative margin with the space-with on the row (this is what bootstrap does)
use the :first-child selector to remove margin-left on the first span in a row
[to be continued]

i can only assume the bootstrap uses the first option because it's more compatible with older browsers (most likely IE 7 and below).

a little example: lets say your spans have a width of 100, a space of 10 and there are 3 in a row.

your total row-width in this case should be 320 (100 + 10 + 100 + 10 + 100 = 320)
a single span has a width of 110 (100 width + 10 magin-left)
- simply adding those up would give you a width of 330 and an ugly space of 10 at the beginning (10 + 100 + 10 + 100 + 10 + 100 = 330)
- "subtract" 10 with one of the listed methods (-10 + 10 + 100 + 10 + 100 + 10 + 100 = 320)
  - hooray, we've created great things with the power of math

question 2 if you use span4s, you already have 3 columns of the same width. you don't need to change anything.

**+42** for _"hooray, we've created great things with the power of math"_ — Carsten, May 22 '13 at 19:32
What is the reason of having some 30px space preformatted? I do not want that I have to use a library and then have to override the default settings because they seem pointless or destroy my layout. I guess I understood your mathematical sample but what should that show me? that an ugly space of 10 at the beginning is stupid? yes that it is indeed, but what more? — Elisabeth, May 26 '13 at 12:56
nothing more - thats just how bootsrap works. if you don't like this behaviour, just use another css-framework supporting grid-based layouts... — oezi, May 26 '13 at 15:13

score 30 · Answer 2 · answered Mar 11 '14 at 11:19

30

Class row adds a

clearfix
negative margin-left
negative margin-right

Bootply: http://www.bootply.com/120858

With negative margin at the beginning:

<div class="row">            
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

Without negative margin at the beginning:

<div>     
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

answered Mar 11 '14 at 11:19

Jens A. Koch

39,862
13
113
141

3

That's only the case because .container or .container-fluid has +15px padding. http://www.bootply.com/4dZkBaUKh3 As Kyle pointed out, just use columns without the container/row div wrappers and just add a clearfix if needed if you don't want to have any padding/margin. – fatal_error Jul 12 '15 at 23:05

score 7 · Answer 3 · answered Jan 31 '14 at 16:45

Because you don't need to use row-fluid anymore. All row does is perform the cleafix and apply the negative margin. This is typically correct for an accurate grid system. You can use containers or instead of using "row" you just use "clearfix" and you'll have the exact same behavior as before with no margin.

score 2 · Answer 4 · answered Apr 03 '18 at 08:31

2

One way to solve this issue is to use class="container row" instead of class="row" , this solution will make the row fit inside the container without horizontal overflow.

answered Apr 03 '18 at 08:31

Ahmed Elkoussy

8,162
10
60
85

this does indeed work, but seems to be improper bootstrap, using mx-auto (class="row mx-auto) on the outermost row does the job in a more standard way – ckapilla Jan 13 '20 at 18:54

score 0 · Answer 5 · answered Sep 19 '13 at 12:57

0

If you are in Fluid mode and using less, a mixin is very usefull: .offsetFirstChild (@columns)

(see mixin.less of Bootstrap)

answered Sep 19 '13 at 12:57

devside

2,171
1
19
23

score 0 · Answer 6 · answered Jun 05 '14 at 14:53

0

Use jQuery:

$('<div>Test</div>').addClass('row').css("margin-left", 0).css("margin-right", 0).appendTo('.content');

answered Jun 05 '14 at 14:53

Vizarius

1

This post is being automatically flagged as low quality because it is only code. Would you mind expanding it by adding some text to explain how is solves the problem? – gung - Reinstate Monica Jun 05 '14 at 15:32
It also fails to answer the question, instead it just adjust the margin. – Jeremy A. West Jul 31 '18 at 13:55

score -1 · Answer 7 · answered May 06 '19 at 15:58

-1

To avoid to use "container" on a separate "div", why don't define a specific class on a custom CSS? I use:

.nomargin {margin: 0;}

and on HTML:

<div class="row nomargin">
 …
 </div>

Same result but more readable.

answered May 06 '19 at 15:58

tedebus

978
13
20

why the downvote? He don't want margins on a row? It's a simple solution as "m-0" but without "!important"... – tedebus Sep 16 '19 at 08:45

Why does the bootstrap .row class have a default margin-left of -30px?

7 Answers7

Linked