Bootstrap の便利なクラス

スポンサーリンク

Bootstrap 4 を使う上で便利なクラスを列挙します。

border-bottom

ヘッダーの下罫線を表示する際に重宝します。

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

border-top

フッターの上罫線を表示する際に重宝します。

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

マージン

マージン左

ml-2

マージン右

 mr-2

実装例

<div class="ml-2 mr-2">
    ...
</div>

画像のレスポンシブ対応

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

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

text-decoration-none

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

<a asp-page="./Index" class="text-decoration-none">
    <svg ...>
        <path ... />
        <path ... />
        <path ... />
    </svg>
</a>

コメント

タイトルとURLをコピーしました