text-center

bootstrap5.css

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

html bootstrap5 Sample

カードカラムによるレイアウト:card-columns


...

カード01

ここに文章が入ります

カード02

文章

文章
...

カード03

文章

文章

カード04

文章

文章

カード05

文章

文章

...

カード07

文章

文章

カード08

文章

文章

  <div class="card-columns">
    <!-- ★複数のカードをレイアウトするためにcard-columnsを使う、flex同様、自動整列される -->
    <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">
      <!-- テキストのセンタリング 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-end">
      <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>

カード内のテキストを左寄せ、中央、右寄せ:text-centerとtext-end


標準(左寄せ)

カードの内容

ボタン

中央寄せ:text-center

カードの内容

ボタン

右寄せ:text-end

カードの内容

ボタン
  <!-- 標準(左寄せ) -->
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">標準(左寄せ)</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
  <!-- divに設定する、中央寄せ:text-center -->
  <div class="card text-center">
    <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>
  <!-- divに設定する、右寄せ:text-end -->
  <div class="card text-end">
    <div class="card-body">
      <h4 class="card-title">右寄せ:text-end</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>

文字に色をつける:text-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>

背景に色を付ける: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>

リンクに色をつける:link-primary


  <div class="text-center">
    <a href="#" class="link-primary">Primary link</a><br>
    <a href="#" class="link-secondary">Secondary link</a><br>
    <a href="#" class="link-success">Success link</a><br>
    <a href="#" class="link-danger">Danger link</a><br>
    <a href="#" class="link-warning">Warning link</a><br>
    <a href="#" class="link-info">Info link</a><br>
    <a href="#" class="link-light">Light link</a><br>
    <a href="#" class="link-dark">Dark link</a>
  </div>

字の左寄せ/中央寄せ/右寄せを設定するクラス:text-start


text-start

text-center

text-end

  <p class="text-start">text-start</p>
  <p class="text-center">text-center</p>
  <p class="text-end">text-end</p>

引用の中央寄せ:blockquoteとtext-center


基本の引用文です。

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

引用符のフッター表記:figcaptionとblockquote-footer


基本の引用文です。

  <!-- HTML仕様では、ブロック引用符の帰属を blockquoteの外側に配置する必要があります。 -->
  <figure class="text-center">
    <blockquote class="blockquote">
      <p class="mb-0">基本の引用文です。</p>
    </blockquote>
    <figcaption class="blockquote-footer">文章の <cite title="引用元の名前">引用元</cite></figcaption>
  </figure>

js 左方向表示のドロップメニュー:dropleft


  <!-- 左方向へのドロップ -->
  <div class="text-center">
    <div class="btn-group dropstart">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">左方向にドロップメニュー表示</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

js オーバーフロー(枠から飛び出すメニュー)を制約する設定:data-boundary


  <div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
    <br><br><br>
    <div class="dropdown">
      <!-- ata-boundary="scrollParent"-->
      <button class="btn btn-secondary dropdown-toggle" data-bs-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-captionとtext-center


図表の画像
図表キャプション中央寄せ(text-center)
  <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>

画像の中央寄せ:text-center


中央寄せ画像
  <!-- divにclassを設定する -->
  <div class="text-center">
    <img src="https://via.placeholder.com/200x200" alt="中央寄せ画像">
  </div>