CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Ignasi
Ignasi

Reputation: 6185

Bootstrap negative margin on rows

Bootstrap rows has a margin (left and right) of -15px.

As far as I know this is mainly by two reasons:

  1. The .container has a padding (left and right) of 15px
  2. The col-* have a gutter of 15px.

So in order to avoid the blank space created by the gutter on the first column (on its left side) and the space created by the gutter on the last column (on its right side) the row has a margin (left and right) of -15px.

I'm just wondering, why not to remove the padding of the container and just set the padding/margin of a row to 0?

It will produce the same effect, the first column will have 15px of distance to the .container, and the same for the last column.

What I'm missing?

I've checked: Negative left and right margin of .row class in Bootstrap and Bootstrap's .row margin-left: -15px - why is it outdented (from the docs) but I don't see any reason to use negative margins instead of 0 padding.

Upvotes: 47

Views: 69485

Answers (5)

Mika G.
Mika G.

Reputation: 132

Negative margins do not exist with bootstrap.

You can add this to do this:

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

@each $size, $value in $spacers {
  .mt-n#{$size} {
    margin-top: -$value;
  }
  .me-n#{$size} {
    margin-right: -$value;
  }
  .mb-n#{$size} {
    margin-bottom: -$value;
  }
  .ms-n#{$size} {
    margin-left: -$value;
  }
  .mx-n#{$size} {
    margin-left: -$value;
    margin-right: -$value;
  }
  .my-n#{$size} {
    margin-top: -$value;
    margin-bottom: -$value;
  }
}

and used this like that mt-n1, me-n4, mx-n3 ...

Upvotes: -1

LearningIsNever EndingProcess
LearningIsNever EndingProcess

Reputation: 251

If removing the minus margin from the row than one should practice to remove the column padding becuase row minus margin is to handle the padding of the same amount in the column.

To remove minus margin recommeded way is to use no-gutters class or g-0 class as per the version of bootstrap.

Upto Bootstrap Version 4.6 Use

<div class="row no-gutters">

Bootstrap Version 5.1 Onwards Use

<div class="row g-0">

Upvotes: 7

Haroon Hayat
Haroon Hayat

Reputation: 53

Bootstrap negative margin on rows is very easy Go to your Bootstrap class and concat 'n' with the margin number For Example

mt-2 //should change to mt-n3

Upvotes: -3

Carol Skelly
Carol Skelly

Reputation: 362620

It's because the containers are meant to be used to contain any content, not just the grid rows and columns. Without padding on the container, content is forced up against the edge of the layout and doesn't align with the other content...

<div class="container px-0">
  <p>This content is aligned with the outer left edge and doesn't align with grid content.</p>
  <div class="row m-0">
      <div class="col-sm-4">
          grid content
      </div>
      <div class="col-sm-4">
          grid content
      </div>
      <div class="col-sm-4">
         grid content
      </div>
  </div>
</div>

https://codeply.com/go/23PqWB19ol

You can see several examples of container used for other than grid content the Bootstrap examples

Negative margins also work better for Responsive Design. Many people ask "why not just adjust the padding on the first and last columns?". This demo shows why

Related: Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?

Upvotes: 32

Mukta
Mukta

Reputation: 1567

Here is your simple and easy answer

Go to your class where you want to give a negative margin and use this method.

Example for margin top

mt-n3

Example for margin bottom

mb-n2

Upvotes: 35

Related Questions