Bootstrap4でコンテンツのマージンやパディングを指定する
Bootstrap4でコンテンツのマージンやパディングを指定するにはコンテンツを表す要素に下の3つの要素を順番に-
で結合したものを名称とするクラスを指定します。
- 上下左右の何れの部分のマージンやパディングであるか?
- 画面の幅(ブラウザのドキュメント表示部分の幅)に応じてマージンやパディングを適用したりしなかったりする基準の幅
- マージンやパディングの大きさ
1つ目の要素には下のようなものがあります。
mt
・・・上マージンmb
・・・下マージンml
・・・左マージンmr
・・・右マージンmx
・・・左右マージンmy
・・・上下マージンm
・・・上下左右マージンpt
・・・上パディングpb
・・・下パディングpl
・・・左パディングpr
・・・右パディングpx
・・・左右パディングpy
・・・上下パディングp
・・・上下左右パディング
2つ目の要素には下のようなものがあります。ただし、この要素は省略することもできます。この要素を省略した場合には常にマージンやパディングが適用されることになります。
576px
以上・・・sm
768px
以上・・・md
992px
以上・・・lg
1200px
以上・・・xl
3つ目の要素には下のようなものがあります。
0
・・・0
1
・・・0.25rem
2
・・・0.5rem
3
・・・1rem
4
・・・1.5rem
5
・・・3rem
auto
・・・auto
例
<div>
要素に様々なマージンやパディングを適用したHTMLドキュメントの例です。分かりやすさのため、<div>
要素の中には背景色が橙色の<span>
要素を格納しています。
また、このHTMLドキュメントではBootstrap4のボーダーを使用しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link href="/asset/lib/bootstrap-4.0.0/css/bootstrap.min.css" rel="stylesheet">
<style>
div {
margin: 4px;
}
span {
background-color: orange;
}
</style>
</head>
<body>
<script src="/asset/lib/jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script src="/asset/lib/popper-1.0.1/popper.min.js"></script>
<script src="/asset/lib/bootstrap-4.0.0/js/bootstrap.min.js"></script>
<div class="pt-0 pb-1 pl-2 pr-3 border border-primary">
<span>pt-0 pb-1 pl-2 pr-3</span>
</div>
<div class="px-4 py-5 border border-secondary">
<span>px-4 py-5</span>
</div>
<div class="p-auto border border-success">
<span>p-auto</span>
</div>
<div class="mt-0 mb-1 ml-2 mr-3 border border-danger">
<span>mt-0 mb-1 ml-2 mr-3</span>
</div>
<div class="mx-4 my-5 border border-warning">
<span>mx-4 my-5</span>
</div>
<div class="m-auto border border-info">
<span>m-auto</span>
</div>
</html>
このHTMLドキュメントはブラウザでは下のように表示されます。

スポンサーリンク