bootstrap4

bootstrap4.css

.text-center {
  text-align: center !important;
}

■カード：card：コンポーネント：カードカラムによるレイアウト card-columns

カード01

ここに文章が入ります

カード02

ここに文章が入ります

ここに文章が入ります

カード03

ここに文章が入ります

カード04

ここに文章が入ります

ここに文章が入ります

カード05

ここに文章が入ります

この文章はダミーです。

カード07

ここに文章が入ります

この文章はダミーです。

カード08

ここに文章が入ります

  <div class="card-columns">
    <!-- カード01 -->
    <div class="card"> <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード01</h4>
        <p class="card-text">ここに文章が入ります</p>
      </div>
    </div>
    <!-- カード02 -->
    <div class="card p-3">
      <blockquote class="blockquote mb-0 card-body">
        <p>カード02</p>
        <p>ここに文章が入ります</p>
        <footer class="blockquote-footer"> <small class="text-muted"> ここに文章が入ります </small> </footer>
      </blockquote>
    </div>
    <!-- カード03 -->
    <div class="card"> <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード03</h4>
        <p class="card-text">ここに文章が入ります</p>
        <p class="card-text"><small class="text-muted">ここに文章が入ります</small></p>
      </div>
    </div>
    <!-- カード04 -->
    <div class="card bg-secondary text-white text-center p-3">
      <blockquote class="blockquote mb-0">
        <p>カード04</p>
        <p>ここに文章が入ります</p>
        <footer class="blockquote-footer"> <small> ここに文章が入ります </small> </footer>
      </blockquote>
    </div>
    <!-- カード05 -->
    <div class="card text-center">
      <div class="card-body">
        <h4 class="card-title">カード05</h4>
        <p class="card-text">ここに文章が入ります</p>
        <p class="card-text"><small class="text-muted">この文章はダミーです。</small></p>
      </div>
    </div>
    <!-- カード06 -->
    <div class="card"> <img class="card-img" src="https://via.placeholder.com/640x480/FFFF00/000000?text=Card 06" alt="..."> </div>
    <!-- カード07 -->
    <div class="card p-3 text-right">
      <blockquote class="blockquote mb-0">
        <p>カード07</p>
        <p>ここに文章が入ります</p>
        <footer class="blockquote-footer"> <small class="text-muted"> この文章はダミーです。 </small> </footer>
      </blockquote>
    </div>
    <!-- カード08 -->
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">カード08</h4>
        <p class="card-text">ここに文章が入ります</p>
        <p class="card-text"><small class="text-muted">ここに文章が入ります</small></p>
      </div>
    </div>
  </div>

■カード：card：コンポーネント：カード内のテキストを左寄せ、中央、右寄せ

標準（左寄せ）

カードの内容

ボタン

中央寄せ：text-center

カードの内容

ボタン

右寄せ：text-right

カードの内容

ボタン

  <!-- 標準（左寄せ） -->
  <div class="card" style="max-width: 25rem;">
    <div class="card-body">
      <h4 class="card-title">標準（左寄せ）</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
  <!-- 中央寄せ：text-center -->
  <div class="card text-center" style="max-width: 25rem;">
    <div class="card-body">
      <h4 class="card-title">中央寄せ：text-center</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
  <!-- 右寄せ：text-right -->
  <div class="card text-right" style="max-width: 25rem;">
    <div class="card-body">
      <h4 class="card-title">右寄せ：text-right</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>

■色Color：bg-primary：ユーティリティ：文字に色をつける

<div class="text-center">
  <p><a href="#" class="text-primary">text-primary</a></p>
  <p><a href="#" class="text-secondary">text-secondary</a></p>
  <p><a href="#" class="text-success">text-success</a></p>
  <p><a href="#" class="text-danger">text-danger</a></p>
  <p><a href="#" class="text-warning">text-warning</a></p>
  <p><a href="#" class="text-info">text-info</a></p>
  <p><a href="#" class="text-light bg-dark">text-light</a></p>
  <p><a href="#" class="text-dark">text-dark</a></p>
  <p><a href="#" class="text-body">text-body</a></p>
  <p><a href="#" class="text-muted">text-muted</a></p>
  <p><a href="#" class="text-white bg-dark">text-white</a></p>
  <p><a href="#" class="text-black-50">text-black-50</a></p>
  <p><a href="#" class="text-white-50 bg-dark">text-white-50</a></p>
</div>

■色Color：bg-primary：ユーティリティ：背景に色を付ける

<div class="text-center">
  <p><a href="#" class="bg-primary text-white d-block py-2">bg-primary</a></p>
  <p><a href="#" class="bg-secondary text-white d-block py-2">bg-secondary</a></p>
  <p><a href="#" class="bg-success text-white d-block py-2">bg-success</a></p>
  <p><a href="#" class="bg-danger text-white d-block py-2">bg-danger</a></p>
  <p><a href="#" class="bg-warning text-dark d-block py-2">bg-warning</a></p>
  <p><a href="#" class="bg-info text-white d-block py-2">bg-info</a></p>
  <p><a href="#" class="bg-light text-dark d-block py-2">bg-light</a></p>
  <p><a href="#" class="bg-dark text-white d-block py-2">bg-dark</a></p>
  <p><a href="#" class="bg-white text-dark d-block py-2">bg-white</a></p>
  <p><a href="#" class="bg-transparent d-block py-2">bg-transparent</a></p>
</div>

■幅、高さ：Sizing：ユーティリティ：高さを指定するクラスh-25

親要素に高さを指定済（height: 200px;）

h-25

h-50

h-75

h-100

  <p class="text-center">親要素に高さを指定済（height: 200px;）</p>
    <div class="h-25 d-inline-block border">h-25</div>
    <div class="h-50 d-inline-block border">h-50</div>
    <div class="h-75 d-inline-block border">h-75</div>
    <div class="h-100 d-inline-block border">h-100</div>

■テキスト：Text：ユーティリティ：字の左寄せ／中央寄せ／右寄せを設定するクラス

text-left

text-center

text-right

  <p class="text-left">text-left</p>
  <p class="text-center">text-center</p>
  <p class="text-right">text-right</p>

■テキスト：Text：ユーティリティ：引用の位置合わせ：中央寄せblockquote text-center

引用文の例を見てみましょう。

基本の引用文です。

文章の引用元が明示できます。

  <p>引用文の例を見てみましょう。</p>
  <blockquote class="blockquote text-center">
   <p class="mb-0">基本の引用文です。</p>
   <footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </blockquote>

■ドロップダウン：dropdown-menu：コンポーネント：ドロップダウンメニューのオーバーフローを制約する境界を設定する

  <div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
    <br><br><br>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-boundary="scrollParent">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
      </div>
    </div>
  </div>

■図表キャプション：figure：図表キャプション：中央寄せ

  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
    <figcaption class="figure-caption text-center">図表キャプション中央寄せ（text-center）</figcaption>
  </figure>

■レスポンシブ画像：img：：Textユーティリティークラスを使用した配置例　text-center

  <div class="text-center">
    <img src="https://via.placeholder.com/200x200" alt="中央寄せ画像">
  </div>

■モーダル：modal：モーダルのJavaScript使用

<div class="container">
  <p class="text-center"><button type="button" class="btn btn-primary">モーダルボタン</button></p>
  
  <!-- モーダル -->
  <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <!-- モーダルのダイアログ本体 -->
    <div class="modal-dialog" role="document">
      <!-- モーダルのコンテンツ部分 -->
      <div class="modal-content"> 
        <div class="modal-header"> 
          <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
        </div>
        <div class="modal-body">モーダルの本文が入ります。</div>
        <div class="modal-footer"> 
          <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          <button type="button" class="btn btn-primary">変更を保存</button>
        </div>
      </div>
      
    </div>
  </div>
</div>
<script>
$('.btn').click(function(){
  $('#myModal').modal('show');
});
</script>

■モーダル：modal：モーダルを閉じるときにメッセージを出す：JavaScript使用

<div class="container">
  <p class="text-center my-5"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">モーダルボタン</button></p>
  <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
        </div>
        <div class="modal-body">モーダルの本文が入ります。</div>
        <div class="modal-footer"> 
          <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          <button type="button" class="btn btn-primary">変更を保存</button>
        </div>
      </div>
      
    </div>
  </div>
</div>
<script>
$('#myModal').on('hide.bs.modal', function(e){
  if(!confirm('閉じてよろしいですか？')){
    e.preventDefault();
  }
});
</script>
</body>
</html>