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 の機能を幅広く学習することができまです。
