CSS

Bootstrap の便利なクラス

2020年6月14日

Bootstrap 5 を使う上で便利なクラスを列挙します。Bootstrap 4 からクラス名が変更されているものもありますので、ご注意ください。

border-bottom

要素の下側に罫線を表示するクラスです。ヘッダーの下罫線を表示する際に重宝します。

<nav class="navbar navbar-light bg-light border-bottom">
    Nav
</nav>

border-top

要素の上側に罫線を表示するクラスです。フッターの上罫線などを表示する際に重宝します。

<footer class="border-top">
    Footer
</footer>

マージン

マージン左

ms-4

マージン右

 me-4

実装例

<div class="ms-4 me-4 bg-info">
    text
</div>

画像のレスポンシブ対応

.img-fluid を加えることで対応できます。

<img src="./image.PNG" alt="" class="img-fluid">

text-decoration-none

ハイパーリンクの下線を消すことができます。

<a href="./other.html" class="text-decoration-none">
    リンクテキスト
</a>

Bootstrap クラスを網羅的に学習するには

Bootstrap クラスについて網羅的に学習するには、Bootstrap 5 フロントエンド開発の教科書がお勧めです。Bootstrap クラス以外にも、レスポンシブレイアウトの仕組みや、Bootstrap アイコン、テーマなど様々な機能を紹介しており、Bootstrap の機能を俯瞰して確認することができてお勧めです。

-CSS