How can I add margin between three Bootstrap columns without them wrapping?

Question

.background-color {
  background-color: lightgrey;
  height: 200px;
  border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-4 background-color">1</div>
    <div class="col-4 background-color">2</div>
    <div class="col-4 background-color">3</div>
  </div>
</div>

So I have three columns which are each 4 columns in width and whenever I add m-3 (margin all around) they break off because of that, how can I contain them? So they stay all 3 on the same line?

.background-color {
  background-color: lightgrey;
  height: 200px;
  border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-4 background-color m-3">1</div>
    <div class="col-4 background-color m-3">2</div>
    <div class="col-4 background-color m-3">3</div>
  </div>
</div>

Answer 1

Only way I saw around this was to nest other elements.

    <div class="container">
      <div class="row">
        <div class="col-4"><div class="col-12 background-color m-3">1</div></div>
        <div class="col-4"><div class="col-12 background-color m-3">2</div></div>
        <div class="col-4"><div class="col-12 background-color m-3">3</div></div>
      </div>
    </div>