情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

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ドキュメントはブラウザでは下のように表示されます。

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-bootstrap