same space vertically and horizontally between columns

Question

Im using bootstap grid and in small devices I have two columns with a default bootstrap space between. Do you know how to give the same space to margin-bottom so the columns have the same space between both vertically and horizontally?

Below this is the example, without margin-bottom, do you know how to give a margin-bottom or top equal to the horizontal margin between the columns?

https://jsfiddle.net/wa1cjfn6/

html:

<div class="HomeEvents">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
      <div class="content">
      <h1>
      text
      </h1>
      </div>
      </div>
         <div class="col-sm-6">
      <div class="content">
      <h1>
      text
      </h1>
      </div>
      </div>
       <div class="col-sm-6">
      <div class="content">
      <h1>
      Text
      </h1>
      </div>
      </div>
    </div>
  </div>
</div>

css:

.content{
  border:1px solid red;
  margin-top:15px;
}

Easiest way is with the [spacing utils](https://stackoverflow.com/questions/43208183/add-spacing-between-vertically-stacked-columns-in-twitter-bootstrap-4/43208888#43208888) that don't require extra CSS. — Carol Skelly, Sep 04 '17 at 13:12

Jade Cowan · Answer 1 · 2017-09-02T15:14:54.017

@JonD, Bootstrap 4 has spacing utility classes that you can apply to your markup that will help with adding margins and padding to you markup, without having to write any CSS in most cases. Here's a link to the spacing utility classes for more information. In this case you can use the mt-5 class on the last div with your content class. to get your desired result. See this codeply project for it's implementation.

score 0 · Accepted Answer · answered Sep 02 '17 at 15:08

Bootstrap columns are styled with padding-left: 15px; padding-right: 15px. Therefore, between two columns you have 30px.

In the forked demo of your fiddle you will see I added padding-bottom: 30px; to the .col-sm-6 class such that the space on the bottom equals the space between the two columns.

As long as the columns have equal height, you will have an evenly spaced layout.

same space vertically and horizontally between columns

2 Answers2