mr-3

bootstrap5.css

bootstrap5.css
.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

html bootstrap5 Sample

メディアオブジェクト画像とタイトルと説明のセット：media

タイトル
ここに文章が入ります 
  <!-- mediaでflexコンテナになる -->
  <!-- 画像が左に配置される -->
  <div class="media">
    <img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章が入ります
    </div>
  </div>

メディアオブジェクト上部に画像を配置：align-self-start

タイトル
ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります 
  <div class="media">
    <!-- アイキャッチなどに利用 -->
    <img class="align-self-start mr-3" alt="" src="https://via.placeholder.com/120x120/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
    </div>
  </div>

メディアオブジェクトのリスト：mediaとmedia-body

  • タイトル
    ここに文章が入ります
  • タイトル
    ここに文章が入ります 
  <!-- マーカなし -->
  <ul class="list-unstyled">
    <li class="media mb-4">
      <img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
      <div class="media-body">
        <h5>タイトル</h5>
        ここに文章が入ります
      </div>
    </li>
    <li class="media mb-4">
      <img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
      <div class="media-body">
        <h5>タイトル</h5>
        ここに文章が入ります
      </div>
    </li>
  </ul>

メディアオブジェクトの入れ子：media

タイトル
ここに文章が入りますここに文章が入ります
子のタイトル
ここに文章が入りますここに文章が入ります 
  <div class="media">
    <img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章が入りますここに文章が入ります
      <!-- media-bodyの中にさらにmedia -->
      <div class="media mt-3">
        <a href="#"><img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img"></a>
        <div class="media-body">
          <h5>子のタイトル</h5>
          ここに文章が入りますここに文章が入ります
        </div>
      </div>
    </div>
  </div>

ボタン：navbar

  <nav class="navbar navbar-dark bg-dark">
    <form class="form-inline">
      <button class="btn btn-light mr-3" type="button">通常のボタン</button>
      <button class="btn btn-sm btn-light" type="button">小サイズのボタン</button>
    </form>
  </nav>