Remove gutter from Bootstrap 4 grid

Question

With Bootstrap 4, I have been asked to customise the default grid system for desktop like this:

wherein, the container & desktop breakpoint is 1280px.

The example I have tried is :

   

 body {
  margin-top: 3rem;
}

.l-wrap {
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

.grid-item {
  width: calc((100% - 50px * 11) / 12);
  margin-top: 24px;
  margin-right: 50px;
  float: left;
}

/* For a 3-column grid */
.grid-item:nth-child(1n+12) {
  margin-right: 0;
  float: right;
}

/* Demo purposes */
.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  text-align: center;
  background: rgba(255, 0, 0, 0.25);
}

<div class="l-wrap">
  <div class="col-grid">
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
  </div>
</div>

This works perfectly fine. But I am trying to achieve same in Bootstrap.

The gutter width is 50px but it lies within container.

This should give me a column width = 61px as my gutter is going to be 50*11 = 550. So 1280-550/12 = 60.83.

By default, bootstrap leaves the gutter from either side.

Solutions that I've tried

1. I tried padding left & padding right from 1st & last column respectively, leaving the grid column to be of different width ( Problem)

2. Tried utilizing SCSS mixin to generate column

@include media-breakpoint-up('lg', $breakpoints) {
   @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
         padding-right: 0;
         padding-left: 0;
         @include make-col($i, $columns);
      }
   }
}

So that, I can remove the padding from either side and then have a custom CSS on top of it to achieve this behaviour but no success

Appreciate if anyone can guide on how to achieve this in Bootstrap, please?

Answer 1

The narrow effects for container and gutter from Susy can be achieved easily in Bootstrap using three key changes:

1. Omit using container or container-fluid class, as stated in the documentation.

   Edit: If you need to restrict the container to 1280px, check the edit below.

2. Set default padding of columns to 25px on each side (so 50px total), instead of the initial 30px total

3. Adjust the negative margin on the row to reflect the gutter change by modifying the default to -25px margin on each side

So essentially your CSS would be:

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

.col,
[class*="col-"] {
  padding-right: 25px;
  padding-left: 25px;
}

One advantage of this approach is its responsiveness – it is not locked to any screen size such as 1280px. This can be seen in action in this jsfiddle snippet or below. Have added some responsive width output for debugging and testing in the former, omitted in the snippet below for brevity.

Edit: If you need to have the container size restricted to 1280px, you could do:

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
        padding-left: 0;
        padding-right: 0;
    }
}

The above will ensure that the container stays at maximum 1280px when the screen is 1280px in width or more, or stick to the default Bootstrap responsiveness when it is less. If you do prefer to have it always at 1280px, remove the media breakpoint and set both width and max-width to 1280px.

#example-row {
  background: #0074D9;
  margin-top: 20px;
}

.example-content {
  display: flex;
  height: 80px;
  background-color: #FFDC00;
  text-align: center;
  align-items: center;
  justify-content: center;
}

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

.col,
[class*="col-"] {
  padding-right: 25px;
  padding-left: 25px;
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
    padding-left: 0;
    padding-right: 0;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container" id="example-container">
  <div class="row" id="example-row">
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
  </div>
</div>

All of this can also be done in the source code with SASS – check the Bootstrap documentation for the mixins.

Lastly, if you do need to have these changes to default sizes only for some special content, change the classes above to a new name (e.g. .container-1280) and amend the HTML accordingly.