Add spacing between vertically stacked columns in Bootstrap 4

Asked 4/4, 2017 at 13:8 Answered 26/7, 2021 at 15:33

Solved html css bootstrap-4 twitter-bootstrap-4 spacing

Unfortunately, there doesn't seem to be a good way to manage vertical spacing between columns that transition from a horizontal stack to a vertical stack at certain breakpoints. There does seem to be a solution when a form is involved, but that's not the situation here. I've tried this solution, but it doesn't work when there are multiple columns that wrap in a row.

To illustrate my scenario, here's the structure of my HTML:

<body>

  <div class="container">

    <div class="row">

      <div class="col-md-4">
        col 1
      </div>

      <div class="col-md-4">
        col 2
      </div>

      <div class="col-md-4">
        col 3
      </div>

      <div class="col-md-4">
        col 4
      </div>

      <div class="col-md-4">
        col 5
      </div>

      <div class="col-md-4">
        col 6
      </div>

    </div>

  </div>

</body>

https://jsfiddle.net/b74a3kbs/6/

At medium-device size (md) and above, I'd like there there to be spacing between the two "rows" of columns, but no spacing above the "first row" of 3 columns and none below the "second row" of 3 columns. When the columns stack vertically at below the medium-device size (md), I'd like there to be spacing between each of the columns, but none above the first child and none below the last child.

Ideally, the solution would work regardless of how many columns (e.g., 3, 5, 6, 12) are contained within the row.

Foolproof answered 4/4, 2017 at 13:8 Comment(2)

i don't think you can do that. you should try dividing in 2 rows and then you can get it done – Swivel 4/4, 2017 at 13:17

ok, then i encourage you to suggest as a solution...certainly seems like one – Foolproof 4/4, 2017 at 13:21

Here's how I ended up making this work:

.row [class*="col-"] { 
   @extend .mb-4;

   &:last-child {
     @extend .mb-0;
   }

   @extend .mb-md-5;

   &:nth-last-of-type(1),
   &:nth-last-of-type(2),
   &:nth-last-of-type(3) {
     @extend .mb-md-0;
   }
}

Foolproof answered 6/4, 2017 at 1:11 Comment(0)

Use the new Bootstrap 4 spacing utilities. For example mb-3 adds margin-bottom of 1rem.
No extra CSS is needed.

http://www.codeply.com/go/ECnbgvs9Ez

<div class="container">
    <div class="row">
      <div class="col-md-4 mb-3">
        col 1
      </div>
      <div class="col-md-4 mb-3">
        col 2
      </div>
      <div class="col-md-4 mb-3">
        col 3
      </div>
      <div class="col-md-4 mb-3">
        col 4
      </div>
      <div class="col-md-4 mb-3">
        col 5
      </div>
      <div class="col-md-4">
        col 6
      </div>
    </div>
</div>

The spacing utils are responsive so you can apply them for specific breakpoints (ie; mb-0 mb-md-3)

If you want a CSS solution, use the solution explained in the related 3.x question (it's not dependent on using a form): https://jsfiddle.net/zdLy6jb1/2/

/* css only solution */
[class*="col-"]:not(:last-child){
  margin-bottom: 15px;
}

Note: the col-lg-4 is extraneous in your markup since col-lg-4 col-md-4,
is the same as col-md-4.

Calyptra answered 4/4, 2017 at 13:37 Comment(0)

see snippet below or jsfiddle

it will work regardless how many cols you have or rows

first ( on big screen ) all rows have margin-bottom except the last one then on medium screen , the rows won't have any margin and the cols will all have margin-bottom except the last col from the last row

.row {
	margin-bottom:30px;
}
.row:last-child{
	margin-bottom:0;
}
.row [class*="col-"] { 
   border:1px solid red;
}

@media only screen and (max-width: 768px) {
	.row { 
	margin:0
	}
	.row [class*="col-"]  {
		margin-bottom:30px;
	}
	.row:last-child [class*="col-"]:last-child{
		margin-bottom:0;
	}
}

<body>

<h1 class="display-3">
hey
</h1>

  <div class="container">

    <div class="row">

      <div class="col-md-4 col-lg-4">
        col 1
      </div>

      <div class="col-md-4 col-lg-4">
        col 2
      </div>

      <div class="col-md-4 col-lg-4">
        col 3
      </div>
</div>
<div class="row">
      <div class="col-md-4 col-lg-4">
        col 4
      </div>

      <div class="col-md-4 col-lg-4">
        col 5
      </div>

      <div class="col-md-4 col-lg-4">
        col 6
      </div>

    </div>

  </div>

</body>

Swivel answered 4/4, 2017 at 13:37 Comment(0)

I just worked through a similar problem with a co-worker. Our solution, using only Bootstrap 4, is as follows:

  <div class="col-md-4">
    col 1
  </div>

  <div class="d-block d-md-none col-12 py-3"></div>

  <div class="col-md-4">
    col 2
  </div>

Using the class "w-100" instead of "col-12" for the middle div also works. What's happening here is the d-block makes it display on extra small devices and up, and the d-md-none makes it disappear at medium widths.

Measles answered 22/1, 2021 at 16:1 Comment(0)

Here's how I ended up making this work:

.row [class*="col-"] { 
   @extend .mb-4;

   &:last-child {
     @extend .mb-0;
   }

   @extend .mb-md-5;

   &:nth-last-of-type(1),
   &:nth-last-of-type(2),
   &:nth-last-of-type(3) {
     @extend .mb-md-0;
   }
}

Foolproof answered 6/4, 2017 at 1:11 Comment(0)

I ended up with this solution:

@include media-breakpoint-down(xs) {
  [class*="col-sm"]:not(:last-child){
    margin-bottom: 15px;
  }
}

@include media-breakpoint-down(sm) {
  [class*="col-md"]:not(:last-child){
    margin-bottom: 15px;
  }
}

@include media-breakpoint-down(md) {
  [class*="col-lg"]:not(:last-child){
    margin-bottom: 15px;
  }
}

Unicycle answered 11/11, 2018 at 15:54 Comment(0)

Use Gutters in row: https://getbootstrap.com/docs/5.0/layout/gutters/

<div class="row gy-2">
  ...
</div>

Merell answered 26/7, 2021 at 15:33 Comment(0)

Recommended topics

Hot tags