Bootstrap row class contains margin-left and margin-right which creates problems

Question

I am using Bootstrap 'row' class to align divs one on top of another, which works fine but

.row {
   margin-left: -15px;
   margin-right: -15px;
 }

What I noticed is that it specifies margin-left and margin-right attributes to be -13px because of which my contents get shifted towards left. so what I have done is added another class as follows :

.row-no-margin {
   margin-left: 0px;
   margin-right: 0px;
}

This solves the purpose, but I would still like to know if there is any specific reason for 'margin-left: -15px;'. And what is the best approach to solve my problem.

score 113 · Accepted Answer · edited Sep 21 '22 at 16:38

113

The .row is meant to be used inside a container. Since the container has padding to adjust the negative margin in the .row, grid columns used inside the .row can then adjust to the full width of the container. See the Bootstrap docs.

Here's an example to illustrate

So, a better solution may for you to place your .row inside a .container or .container-fluid

edited Sep 21 '22 at 16:38

Cadoiz

1,446
21
31

answered Apr 18 '14 at 11:56

Carol Skelly

351,302
90
710
624

2

Will wrap my contents inside '.container-fluid', Thanks :) – Tarun Gupta Apr 18 '14 at 12:07
19

Or just use `.clearfix` instead of `.row`. It does the same thing but without the margin on both side. – Bardyl Jan 21 '16 at 11:06
7

Beware, while clearfix appears to work at first, it's [not meant for containing grid cols](http://getbootstrap.com/css/#grid), and will cause [improper spacing](http://www.codeply.com/go/sV2tneJWKv). Also, containers are responsive and can have different widths. – Carol Skelly Sep 22 '16 at 09:49
so .row should be direct child of a .container ? How its the correct way to a align things like:
(global container for grids inside)
some text.. (this text is not aligned since do not have the -15px margin)
...
– Ignacio Vazquez Nov 27 '17 at 12:59

score 7 · Answer 2 · edited May 23 '17 at 10:30

7

You can use row-fluid instead of row, then you won't have this problem. (for previous versions of bootstrap)

I am not sure of recent versions 3, any way :

The issue is that the first column should not have half a gutter on the left, and the last should not have half a gutter on the right. Rather than use some sort of .first or .last class on those columns as some grid systems do, they instead set the .row class to have negative margins that match the padding of the columns. This "pulls" the gutters off of the first and last columns, while at the same time making it wider.

For more information on this Why does the bootstrap .row has a default margin-left of -30px?

edited May 23 '17 at 10:30

Community

1
1

answered Apr 18 '14 at 12:01

4dgaurav

11,360
4
32
59

4

`row-fluid` is longer used in the latest version.. [Bootstrap 3](http://bootply.com/bootstrap-3-migration-guide) – Carol Skelly Apr 18 '14 at 12:03
1

@Gaurav yeah row-fluid is not present in Bootstrap v3.1.1 – Tarun Gupta Apr 18 '14 at 12:05
1

@Baghoo, so 3 people upvoted your comment about +1'ing `Gaurav`, and yet he only has two upvotes (and one downvote!). I think there are two SO users who aren't pulling their weight around here voting wise :) Also when did you change your username from skelly? Also, thanks for Bootply. – KyleMit Apr 18 '14 at 17:40
1

@KyleMit - wow, that's some nice detective work. I changed it last week. Thanks for mentioning Bootply :-) – Carol Skelly Apr 18 '14 at 17:44

score 2 · Answer 3 · answered Apr 18 '14 at 11:59

Are you using Bootstrap 3? My version of the css has -15px, not -13px. In any case, I've simply done what you've down, and overwritten the style. I believe it's because the .container class has a 15px padding on the left and right, and this negative margin on the rows will pull that content back out to the edge of the container.

score 2 · Answer 4 · answered Apr 27 '20 at 08:21

Old topic, but I think I found another descent solution. Adding class="row" to a div will result in this CSS configuration:

.row {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

We want to keep the first 3 rules and we can do this with class="d-flex flex-wrap" (see https://getbootstrap.com/docs/4.1/utilities/flex/):

.flex-wrap {
    flex-wrap: wrap !important;
}
.d-flex {
    display: -webkit-box !important;
    display: flex !important;
}

It adds !important rules though but it shouldn't be a problem in most cases...

score 2 · Answer 5 · answered Nov 14 '20 at 10:33

2

Here is your simple and easy answer

Go to your class where you want to give a negative margin then copy and paste this inside the class.

Example for negative margin top

mt-n3

Example for negative margin bottom

mb-n2

answered Nov 14 '20 at 10:33

Mukta

1,357
1
15
17

score 1 · Answer 6 · answered Aug 14 '18 at 12:10

Old topic, but I was recently affected by this.

Using a class "row-fluid" instead of "row" worked fine for me but I'm not sure if it's fully supported going forward.

So after reading Why does the bootstrap .row has a default margin-left of -30px I just used the <div> (without any row class) and it behaved exactly like <div class="row-fluid">

score 1 · Answer 7 · answered May 31 '21 at 03:04

1

Any row that you create, wrap each row inside a container div to solve the problem.

<!-- row 1 -->

<div class="container">
<div class="row"></div>
</div>

 <!-- row 2 -->

<div class="container">
<div class="row"></div>
</div>

answered May 31 '21 at 03:04

Baraja Swargiary

381
2
10

score 0 · Answer 8 · answered Jul 13 '18 at 22:06

I was facing this same issue and initially, I removed the row's right and left -ve margin and it removed the horizontal scroll, but it wasn't good. Then after 45 minutes of inspecting and searching, I found out that I was using container-fluid and was removing the padding and its inner row had left and right negative margins. So I gave container-fluid it's padding back and everything went back to normal.

If you do need to remove container-fluid padding, don't just remove every row's left and right negative margin in your project instead introduce a class and use that on your desired container

score 0 · Answer 9 · answered Jan 10 '21 at 07:08

0

To remove the margins on all rows:

.row {
    margin: 0px !important;
}

answered Jan 10 '21 at 07:08

Sasino

134
2
11

score -4 · Answer 10 · answered Jan 31 '17 at 20:57

-4

I used div class="form-control" instead of div class="row"

That fixed for me.

answered Jan 31 '17 at 20:57

Vkl125

140
1
9

Bootstrap row class contains margin-left and margin-right which creates problems

10 Answers10

Linked

Related