Bootstrap 4, gutters between columns without wrapping to the next line

Question

I'm trying to figure out how to include a bit of margin between my columns (using Bootstrap 4 grid system), so that there is a tiny bit of space between them, without one column dropping to the next line. I tried googling it and even tried some of the advice found here, but nothing worked for me (maybe because a lot of the posts I found were quite old). Thank you in advance for a your replies ! :)

Here is my code:

<section  class="categories">
  <div class="container-fluid">
      <div class="row mt-1">
        <div class="col-xs-12 cat">
            <h4>Stars and &amp; Planets</h4>
        </div>
      </div>
      <div class="row mt-1">
        <div class="col-md-8 cat">
            <h4>Space Travel</h4>
        </div>
        <div class="col-md-4 cat">
            <h4>Worm Holes</h4>
        </div>
      </div>
  </div>
</section>

CSS:

.cat {
 height: 300px;
 background-color: #666;
 width: 100%;
}

For "without wrapping to the next line" see: https://stackoverflow.com/questions/35993300/horizontally-scrollable-list-of-cards-in-bootstrap — Carol Skelly, Jun 28 '17 at 15:29

Brett DeWoody · Accepted Answer · 2017-06-25T17:01:28.627

By default the columns have a gutter separating them. However, by applying a background-color to the column this won't be obvious because the gutters are created using padding and the background-color will extend into the gutter.

One way to see this is by setting the background-color on a inner element within the column. Like this:

.cat {
 height: 100px;
}

.cat-inner {
  height: 100%;
  padding: 10px;
  background-color: #666;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<section class="categories">
  <div class="container-fluid">
    <div class="row mt-1">
      <div class="col-12 cat">
        <div class="cat-inner">
          <h4>Stars and &amp; Planets</h4>
        </div>
      </div>
    </div>
    <div class="row mt-1">
      <div class="col-8 cat">
        <div class="cat-inner">
          <h4>Space Travel</h4>
        </div>
      </div>
      <div class="col-4 cat">
        <div class="cat-inner">
          <h4>Worm Holes</h4>
        </div>
      </div>
    </div>
  </div>
</section>

This setup might also solve your problem, as each column now has a visual break between them.

The gutter width can be changed with some simple CSS to reduce the space between the columns. The change will vary depending on how you're using Bootstrap - Sass/Less, CSS, etc. For some simple CSS you can use:

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

This somewhat odd CSS selector will match all elements which contain col- in their class attribute. ie col-8, col-12, col-md-8, etc. And result in:

NOTE: the example below uses !important but this is not necessary in most cases. Due to the way SO loads the Bootstrap CSS the !important is required in this example.

.cat {
  height: 100px;
}

[class*="col-"] {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.cat-inner {
  height: 100%;
  padding: 10px;
  background-color: #666;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<section class="categories">
  <div class="container-fluid">
    <div class="row mt-1">
      <div class="col-12 cat">
        <div class="cat-inner">
          <h4>Stars and &amp; Planets</h4>
        </div>
      </div>
    </div>
    <div class="row mt-1">
      <div class="col-8 cat">
        <div class="cat-inner">
          <h4>Space Travel</h4>
        </div>
      </div>
      <div class="col-4 cat">
        <div class="cat-inner">
          <h4>Worm Holes</h4>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap 4, gutters between columns without wrapping to the next line

1 Answers1