Bootstrap でマージンを設定する方法を紹介します。通常の CSS のプロパティ表記と異なり、省略形が使われているので、省略のルールを示します。
実装ルール
マージンと位置は、次のような規則で表現します。マージンと位置の頭文字を取り、ハイフォンに続けてサイズを指定する形式です。
- 上マージン・・・margin-top + サイズ => mt-4
- 左マージン・・・margin-start + サイズ => ms-4 ※ left ではなく start の頭文字 s が使われます。
- 下マージン・・・margin-bottom + サイズ => mb-4
- 右マージン・・・margin-end + サイズ => me-4 ※ right ではなく end の頭文字 e が使われます。
実装例
ここでは、左マージン(ms)と右マージン(me)を実装する例を示します。
<div class="ms-4 me-4 bg-info">
text
</div>
実行結果
div 要素の左右にマージンを指定することができました。
サンプルダウンロード
Bootstrap クラスを網羅的に学習するには
Bootstrap クラスについて網羅的に学習するには、Bootstrap 5 フロントエンド開発の教科書がお勧めです。Bootstrap クラス以外にも、レスポンシブレイアウトの仕組みや、Bootstrap アイコン、テーマなど様々な機能を紹介しており、Bootstrap の機能を俯瞰して確認することができてお勧めです。
