Bootstrap: Remove column margin

Question

I have a three-column layout and I need to remove the margin from the left and right.

<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row row-no-padding">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

I tried

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

with no result... fiddle

EDIT: I need to keep the class="container" intact.

So, what I need: and what I have now:

EDIT: So, based on what Ricky_Ruiz said about .container properties: I wanted in 100% browser window to make margin-left and margin-right equal zero. Say, my screen resolution is 1300, so I just needed to include this in .css file:

@media (min-width: 1300px) {
  .container {
    width: 1300px;
  }
}

score 3 · Accepted Answer · edited May 23 '17 at 12:24

You just need to remove the margin from the .row class and the padding from the .col classes.

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

[class*="col-"],  /* Elements whose class attribute begins with "col-" */
[class^="col-"] { /* Elements whose class attribute contains the substring "col-" */
  padding-left: 0;
  padding-right: 0;
}

Note: In the demo we will be using !important for code snippet specificity purposes. In production just reference this classes below bootstrap.css.

Code Snippet:

.row {
  border: .1em dashed dodgerblue;
}
.row-no-padding {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[class*="col-"],
[class^="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row row-no-padding">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

EDIT:

What the OP actually wants is to have a child element wider than its parent.

Even though this can be achieved in different ways, I do not recommend it.

The best approach is to use different containers for content. That's why Bootstrap has a class named .container-fluid. You just set the padding value to 0 in this class and you're good to go.

Code Snippet:

body {
  margin: 0;
}
main {
  background-color: coral;
}
.container-fluid--no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.row {
  border: .1em dashed dodgerblue;
}
.row-no-padding {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[class*="col-"],
[class^="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<main>
  <div class="container">
    <h1>Hello World!</h1>
    <p>Resize the browser window to see the effect.</p>
  </div>
  <div class="container-fluid container-fluid--no-padding">
    <div class="row row-no-padding">
      <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
      <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
      <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    </div>
  </div>
  <div class="container">
    <h1>Hello World!</h1>
    <p>Resize the browser window to see the effect.</p>
  </div>
</main>

FURTHER EXPLANATION:

How does the .container class in Bootstrap works?

The .container class sets a fixed width to its element in different viewports, using CSS media queries.

Since Bootstrap is mobile first, the value of the width property in the .container class is auto (Block level element default width). It then changes accordingly to its viewport with the queries.

You can see what it does here:

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

The .container-fluid class properties are just the ones below:

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

The snippet doesn't seem to work. There is always a space between left and right column and the screen's edges. — parsecer, Oct 13 '16 at 17:33

score 1 · Answer 2 · answered Oct 13 '16 at 17:12

1

You are using .container, use .container-fluid instead

answered Oct 13 '16 at 17:12

Christian Vincenzo Traina

9,546
2
40
63

score 1 · Answer 3 · answered Oct 13 '16 at 17:18

Try this:

.row-no-padding {
  padding-left: 0;
  padding-right: 0;
}

.row-no-padding.col-sm-4 {
  padding: 0;
}

<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row row-no-padding">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

JeremyS · Answer 4 · 2016-10-13T17:39:32.820

If you want to target the divs with the class col-sm-4, then you can do so like this:

.row-no-padding {
    margin-left: 0;
    margin-right: 0;
}
.row-no-padding .col-sm-4 {
    padding-left: 0;
    padding-right: 0;
}

There's no need to add important if you chain classes and/or ids together (it's like adding up values, with ids being the most points, classes being the next and then tag names). This will keep the code cleaner and more usable in the future.

The fiddle has the css in the JavaScript area and it's structured like LESS or SASS, so it won't run. Probably just an over-site. Here's another: fiddle

If you want to remove all margins on the container you can set the container to full with and remove padding:

body > .container {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

fiddle

score 1 · Answer 5 · answered Oct 13 '16 at 17:19

1

Your fiddle has almost the right css but you have pasted it into the javascript window. You also have the class listed twice. I have updated to the following:

.row-no-padding {
    margin-left: 0;
    margin-right: 0;
    [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

See in action here:

http://codepen.io/egerrard/pen/LRmpYj

answered Oct 13 '16 at 17:19

Eric G

2,577
1
14
21

But the margin isn't zero. I need a purple and a blue column to extends to the edges, so that there was no gray visible. – parsecer Oct 13 '16 at 17:34
@parsecer, then you need to remove padding from the .container and set the width to 100%. See the second fiddle in my answer. – JeremyS Oct 13 '16 at 17:40
@parsecer I have updated my codepen to reflect your needs. Instead of changing how containers work everywhere I would create a new class. As you mention above, you need to use the container class so add an additional class with the functionality you want. Or you could override .container but it wouldn't be recommended. – Eric G Oct 13 '16 at 17:43
@parsecer Ok, updated 2x to keep `class="container"` unchanged. I am now wrapping another div around the container. You can use this method or just add the class to the container div. Either way will get the same result. – Eric G Oct 13 '16 at 17:54

score 0 · Answer 6 · answered Oct 13 '16 at 17:11

0

Use .container-fluid instead of .container.

The margin you see comes from the width set by the container-width.

answered Oct 13 '16 at 17:11

campino2k

1,618
1
14
25

I don't want to use the fluid container. Need to find a solution for the `class="container"` explicitly. – parsecer Oct 13 '16 at 17:13

score 0 · Answer 7 · answered May 07 '21 at 20:29

0

another simple option is:

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

.col-12 {
    padding-left: 0px;
    padding-right: 0px;
}

answered May 07 '21 at 20:29

Gabriel Alcântara

11

in this case, I remove margin from all div that contains the "row" class and remove padding from all div that contains "col-12". If u wanna remover padding from another class than "col-12", u can simply replace by "col-x" where x is your name class from bootstrap... – Gabriel Alcântara May 07 '21 at 20:30

Bootstrap: Remove column margin

7 Answers7

EDIT:

FURTHER EXPLANATION: