mb-2

bootstrap5.css

bootstrap5.css
.mb-2 {
  margin-bottom: 0.5rem !important;
}

html bootstrap5 Sample

背景にグラデーション:bg-gradient


.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
  <div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>
  <div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>
  <div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success.bg-gradient</div>
  <div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger.bg-gradient</div>
  <div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning.bg-gradient</div>
  <div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info.bg-gradient</div>
  <div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light.bg-gradient</div>
  <div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark.bg-gradient</div>

Float(画像と文字):float-startとfloat-none


Image
文字が重ならない、画像と同じ位置からスタート
Image
文字が重ならない、画像と同じ位置からスタート
Image
画像の位置から改行されて、文字がスタート
  <div class="clearfix mb-2">
    <div class="float-start"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
    文字が重ならない、画像と同じ位置からスタート
  </div>
  <div class="clearfix mb-2">
    <div class="float-end"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
    文字が重ならない、画像と同じ位置からスタート
  </div>
  <!-- float-noneはfloatしないとのと同じ状態 -->
  <div class="clearfix">
    <div class="float-none"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
    画像の位置から改行されて、文字がスタート
  </div>

フォームレイアウトにrow自動サイズ調整カラム:rowとcol-auto


  <!-- flexbox ユーティリティを使用してコンテンツを垂直方向にセンタリングし、 -->
  <!-- .col を .col-auto に変更して、カラムが必要なだけのスペースを占有する。 -->
  <!-- カラムのサイズは内容に基づいてデバイス等により自動的に決定されます -->
  <!-- bootstrap5では、form-rowからrowに変更 -->
  <div class="row align-items-center">
    <div class="col-auto">
      <!-- labelはvisually-hidden -->
      <label class="visually-hidden" for="inputName">氏名</label>
      <input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
    </div>
    <div class="col-auto">
      <div class="input-group mb-2">
        <label class="visually-hidden" for="inputUsername">ユーザーネーム</label>
        <input type="text" class="form-control" id="inputUsername" placeholder="ユーザーネームを入力">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input type="checkbox" class="form-check-input" id="check">
        <label class="form-check-label" for="check"> チェックする </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">送信</button>
    </div>
  </div>

インラインのフォーム:form-inline


@
  <!-- formにclassを設定する -->
  <form class="form-inline">
    <label class="visually-hidden" for="name">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
    <label class="visually-hidden" for="username">ユーザーネーム</label>
    <!-- input-groupとinput-group-textを設定して、テキスト文字と混在させる -->
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="username" placeholder="ユーザーネームを入力">
    </div>
    <div class="form-check mb-2 mr-sm-2">
      <input class="form-check-input" type="checkbox" id="checkbox20">
      <label class="form-check-label" for="checkbox20">チェックする</label>
    </div>
    <button type="submit" class="btn btn-primary mb-2">送信</button>
  </form>