更新日: 2018 / 10 / 05

Bootstrap4の基本コンテンツの使い方

Bootstrap4のテーブルやフォーム、ボタンなどHTMLタグで使えるコンテンツの使い方まとめ。

Bootstrap4には様々なコンポーネントが用意されていますが、HTML+classで使えるのが基本コンテンツ。

基本コンテンツだけでもかなり便利なのでまずはここを押さえておきましょう。

Bootstrap4 Buttonコンポーネントの使い方

Bootstrap4では色数が少し増えて全部で９色に。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

ボタンスタイルをアウトラインに変更

色の手前にoutlineをつけるとべた塗りではなく、線のボタンになります。

<button type="button" class="btn btn-outline-primary">Primary</button>

ボタンのサイズを変更

ボタンのサイズ変更もclassを追加するだけでOK。サイズはBootstrap3と同じで３つ。

btn-blockをつけることでフルワイドのボタンになります。

<button type="button" class="btn btn-primary btn-lg">ボタン大</button>
<button type="button" class="btn btn-primary">ボタン中</button>
<button type="button" class="btn btn-primary btn-sm">ボタン小</button>

<button type="button" class="btn btn-primary btn-block">ブロックボタン</button>

Bootstrap4 Buttonコンポーネントサンプル

Bootstrap4 画像とFiguresのスタイル

画像はレスポンシブ対応にしたり、角丸やサムネイル化させることができます。

画像の形やスタイルを変更する

<!-- レスポンシブ対応 -->
<img src="https://placehold.it/1200x300" class="img-fluid" alt="レスポンシブ対応">

<!-- 画像を角丸に -->
<img src="https://placehold.it/400x300" class="rounded" alt="画像を角丸に">

<!-- 画像を円に -->
<img src="https://placehold.it/400x300" class="rounded-circle" alt="画像を円に">

<!-- 画像をサムネイル化 -->
<img src="https://placehold.it/400x300" class="img-thumbnail" alt="画像をサムネイル化">

<!-- 画像に線を追加 -->
<img src="https://placehold.it/400x300" class="border" alt="画像に線を追加">

Figuresのキャプション位置を変更する

画像にキャプションをつけたい場合にはこちらを使用します。キャプションはtext-centerやtext-rightで中央寄せ、右寄せに変更可能。

<figure class="figure">
  <img src="https://placehold.it/400x300" class="figure-img img-fluid" alt="キャプション付き画像">
  <figcaption class="figure-caption">画像のキャプション</figcaption>
</figure>

<!-- 中央寄せ -->
<figure class="figure">
  <img src="https://placehold.it/400x300" class="figure-img img-fluid" alt="キャプション付き画像">
  <figcaption class="figure-caption text-center">画像のキャプション中央寄せ</figcaption>
</figure>

<!-- 右寄せ -->
<figure class="figure">
  <img src="https://placehold.it/400x300" class="figure-img img-fluid" alt="キャプション付き画像">
  <figcaption class="figure-caption text-right">画像のキャプション右寄せ</figcaption>
</figure>

Bootstrap4 画像とFiguresのスタイルサンプル

Bootstrap4 Tableスタイルの使い方

表もWebサイトでよく使うコンテンツです。Bootstrap4を使うことで見やすくするため線や背景を変更したり、レスポンシブに対応した表を作成することができます。

線のスタイルを変更する

Bootstrap4のtableコンテンツでは、table-borderedで枠線をつけることができ、table-borderlessで線を非表示にすることができます。

<!-- 枠線付き -->
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

<!-- 線なし -->
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

表のサイズを変更する

table-smを組み合わせることで幅の狭い表を作ることができます。

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

表の背景色を変更する

表の背景色を変更することができます。table-darkで全体の色を黒くしたり、ヘッダのみ色を変更したり、交互に色をつけることができます。

<!-- 全体の色を黒く -->
<table class="table table-dark">
  ...
</table>

<!-- ヘッダの色を変更 -->
<table class="table">
  <thead class="thead-dark">
    ...
  </thead>
</table>

<!-- ストライプスタイルに変更 -->
<table class="table table-striped">
  ...
</table>

<!-- 表の行に色をつける -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- 表のセルに色をつける -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

表をレスポンシブに対応させる

Bootstrap4では、table-responsiveをつけたdiv要素で表を囲むことで、画面幅をオーバーしたときにスクロールバーを付けて綺麗に表示できるようにできます。

また、レスポンシブにしたい画面サイズを-lgや-mdで変更することも可能。

<!-- 常にレスポンシブを有効にする -->
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<!-- smサイズまでレスポンシブを有効にする -->
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<!-- mdサイズまでレスポンシブを有効にする -->
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<!-- lgサイズまでレスポンシブを有効にする -->
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

Bootstrap4 Tableスタイルサンプル

Bootstrap4 Formスタイルの使い方

Formの基本形

Bootstrap4のフォームは、form-groupとform-controlでスタイル作成することができます。チェックとラジオボタンはform-check-inputになってるので注意。

また、フォームにはヘルプテキストも追加でき、form-textで上マージン付きのテキストを表示できます。

<form>
  <div class="form-group">
    <label for="mail1">メールアドレス</label>
    <input type="email" class="form-control" id="mail1" placeholder="メールアドレス">
    <small id="emailHelp" class="form-text text-muted">私たちはあなたのメールを誰とも共有しません。</small>
  </div>
  <div class="form-group">
    <label for="password1">パスワード</label>
    <input type="password" class="form-control" id="password1" placeholder="パスワード">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="check1">
    <label class="form-check-label" for="check1">規約に同意する</label>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

フォームのサイズを変更する

選択と入力フォームはサイズの変更が可能です。サイズは-lg、-smと通常の３種類。

<!-- 入力フォームのサイズ変更 -->
<input class="form-control form-control-lg" type="text" placeholder="大きいフォーム">
<input class="form-control" type="text" placeholder="通常フォーム">
<input class="form-control form-control-sm" type="text" placeholder="小さいフォーム">

<!-- 選択フォームのサイズ変更 -->
<select class="form-control form-control-lg">
  <option>大きい選択</option>
</select>
<select class="form-control">
  <option>通常の選択</option>
</select>
<select class="form-control form-control-sm">
  <option>小さい選択</option>
</select>

フォームレイアウトの作り方

フォームもグリッドレイアウトで複数の列に分けることができます。その際form-rowを使うことでフォーム用に最適化されたレイアウトを使うことができます。

<!-- 入力フォームを２列で表示 -->
<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="mail2">メールアドレス</label>
      <input type="email" class="form-control" id="mail2" placeholder="メールアドレス">
      <small id="emailHelp" class="form-text text-muted">私たちはあなたのメールを誰とも共有しません。</small>
    </div>
    <div class="form-group col-md-6">
      <label for="password2">パスワード</label>
      <input type="password" class="form-control" id="password2" placeholder="パスワード">
    </div>
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="check1">
    <label class="form-check-label" for="check1">規約に同意する</label>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

<!-- ラベルを入力フォームの横に表示 -->
<form>
  <div class="form-group row">
    <label for="mail3" class="col-sm-2 col-form-label">メールアドレス</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="mail3" placeholder="メールアドレス">
    </div>
  </div>
  <div class="form-group row">
    <label for="password3" class="col-sm-2 col-form-label">パスワード</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password3" placeholder="パスワード">
    </div>
  </div>
</form>

Bootstrap4 Formスタイルサンプル

まとめ

基本的なコンテンツのスタイルはBootstrap4のテーマをカスタマイズすることで簡単に編集できるので、デフォルトスタイルが気に入らないときはさくっと変えちゃいましょう。

あとテーブルやフォームを作るときはエディターのコードスニペット機能を使うと便利です。