bootstrap4

bootstrap4.css

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

bootstrap4.css

.offset-1 {
  margin-left: 8.333333%;
}

bootstrap4.css

.offset-2 {
  margin-left: 16.666667%;
}

bootstrap4.css

.offset-3 {
  margin-left: 25%;
}

bootstrap4.css

.offset-4 {
  margin-left: 33.333333%;
}

bootstrap4.css

.offset-5 {
  margin-left: 41.666667%;
}

bootstrap4.css

.offset-6 {
  margin-left: 50%;
}

bootstrap4.css

.offset-7 {
  margin-left: 58.333333%;
}

bootstrap4.css

.offset-8 {
  margin-left: 66.666667%;
}

bootstrap4.css

.offset-9 {
  margin-left: 75%;
}

bootstrap4.css

.offset-10 {
  margin-left: 83.333333%;
}

bootstrap4.css

.offset-11 {
  margin-left: 91.666667%;
}

■レイアウト：rowとcol：オフセットのリセット

col-sm-5とcol-md-6

col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0

  <div class="row">
    <div class="col-sm-5 col-md-6">col-sm-5とcol-md-6</div>
    <!-- Medium以上でオフセットをクリア -->
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0</div>
  </div>

■レイアウト：rowとcol：オフセット用クラスによるカラムのオフセット

col-md-4

col-md-4とoffset-md-4

  <div class="row">
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-4 offset-md-4">col-md-4とoffset-md-4</div><!-- Medium以上で4列分左に移動 -->
  </div>

■ドロップダウン：dropdown-menu：コンポーネント：ドロップダウンのオフセット値を設定する

  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" data-offset="10,20" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>

■ドロップダウン：dropdown-menu：js：ドロップダウンのオフセット値を設定する

  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>
<script>
  $(function() {
    $('#dropdownMenuButton').dropdown({
      offset: '10, 20'
    })
  });
</script>

■ボタン：button：コンポーネント：ラジオボタンをボタンに変更する

ラジオ1 ラジオ2 ラジオ3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" checked autocomplete="off">ラジオ1
  </label>
  <label class="btn btn-secondary">
    <input type="radio" autocomplete="off">ラジオ2
  </label>
  <label class="btn btn-secondary">
    <input type="radio" autocomplete="off">ラジオ3
  </label>
</div>

■ボタン：button：コンポーネント：チェックボックスをボタン変更する　data-toggle=buttons

チェック1 チェック2 チェック3

  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked autocomplete="off">チェック1
    </label>
    <label class="btn btn-secondary">
      <input type="checkbox" autocomplete="off">チェック2
    </label>
    <label class="btn btn-secondary">
      <input type="checkbox" autocomplete="off">チェック3
    </label>
  </div>

■ボタン：button：コンポーネント：切り替えボタンを作成する

  <button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true" autocomplete="off">プッシュ状態</button>
  <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">未プッシュ状態</button>

■ボタン：button：コンポーネント：JavaScriptでボタンの動作　id指定 toggle-btn：js

  <button type="button" class="btn btn-primary" aria-pressed="true" autocomplete="off" id="toggle-btn">押してね</button>
<script>
  $("#toggle-btn").on('click', function() {
    $(this).button('toggle').text('押したね');
  });
</script>