<div class="container">
  <h3>中央を可変幅。左右を数字を入れたクラスを指定した例</h3>
  <div class="row justify-content-sm-center">
    <div class="col col-md-2">
      3つの列の1列目<br>.col-md-2
    </div>
    <div class="col-sm-auto">
      3つの列の2列目<br>.col-sm-auto
    </div>
    <div class="col col-md-2">
      3つの列の3列目<br>.col-md-2
    </div>
  </div>
  <h3>中央を可変幅。左右を数字を入れないクラスを指定、右のみmdで数字を指定したクラスも設定した例</h3>
  <div class="row">
    <div class="col">
      3つの列の1列目<br>.col
    </div>
    <div class="col-sm-auto">
      3つの列の2列目<br>.col-sm-auto
    </div>
    <div class="col col-md-2">
      3つの列の3列目<br>.col .col-md-2
    </div>
  </div>
  <h3>中央を可変幅にし、テキストを大量に入れた例</h3>
  <div class="row">
    <div class="col">
      3つの列の1列目<br>.col
    </div>
    <div class="col-sm-auto">
      可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ<br>.col-sm-auto
    </div>
    <div class="col">
      3つの列の3列目<br>.col
    </div>
  </div>
</div>
.row > [class*=col] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

h3 {
  margin-top: 1rem;
  text-align: center;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css

External JavaScript

This Pen doesn't use any external JavaScript resources.