Bootstrap Row Class Contains Margin-Left and Margin-Right Which Creates Problems

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

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

Why does bootstrap row has a margin of -15?

By design, there is a 15px space between 2 columns in bootstrap. And when implementing it, bootstrap's creator uses CSS properties called padding-left and padding-right to set the left and right padding of the column so that the requirement could be full-filled.

Reference: access this link and search for Gutter Width

But there is a problem. The first column only needs padding-right and the last column only needs padding-left.

To solve that problem, bootstrap's creator comes up with a solution in which they sets the left and right margin of the row to be -15px (negative padding is not supported in CSS).

I usually create another CSS class that adjust the padding / margin then append it after the row class.

How to remove margin-left and margin-right of col class in bootstrap?

As Yorki Bonilla said you can do something like this:

<div class="container">
<div class="row no-marginLR">
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />
    </div>
    <div class="col-sm-6 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/center1.jpg" runat="server" />
    </div>
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />    
    </div>
</div>

And add a class in your CSS

.no-padding {
    padding: 0px;
}

But at the same time you have to remember to remove the left and right margin to the row that contains your columns by doing:

.no-marginLR {
    margin-left:0;
    margin-right:0;
}

Note that I've added the .no-marginLR class to the row

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

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.

Bootstrap column grid: Margin issues

That's because of the container you're using, the one you want is container-fluid which has no margin no padding, no nothing haha.

container gives each div a specified fixed width, that is the reason behind the blank spaces

You can check the documentation here: documentation

---

Related Topics