p-3

bootstrap5.css

bootstrap5.css
.p-3 {
  padding: 1rem !important;
}

html bootstrap5 Sample

カードカラムによるレイアウト:card-columns


...

カード01

ここに文章が入ります

カード02

文章

文章
...

カード03

文章

文章

カード04

文章

文章

カード05

文章

文章

...

カード07

文章

文章

カード08

文章

文章

  <div class="card-columns">
    <!-- ★複数のカードをレイアウトするためにcard-columnsを使う、flex同様、自動整列される -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード01</h4>
        <p class="card-text">ここに文章が入ります</p>
      </div>
    </div>
    <!-- カード02 -->
    <div class="card p-3">
      <blockquote class="blockquote mb-0 card-body">
        <p>カード02</p>
        <p>文章</p>
        <footer class="blockquote-footer"> <small class="text-muted">文章</small> </footer>
      </blockquote>
    </div>
    <!-- カード03 -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード03</h4>
        <p class="card-text">文章</p>
        <p class="card-text"><small class="text-muted">文章</small></p>
      </div>
    </div>
    <!-- カード04 -->
    <div class="card bg-secondary text-white text-center p-3">
      <blockquote class="blockquote mb-0">
        <p>カード04</p>
        <p>文章</p>
        <footer class="blockquote-footer"> <small> 文章 </small> </footer>
      </blockquote>
    </div>
    <!-- カード05 -->
    <div class="card text-center">
      <div class="card-body">
        <h4 class="card-title">カード05</h4>
        <p class="card-text">文章</p>
        <p class="card-text"><small class="text-muted">文章</small></p>
      </div>
    </div>
    <!-- カード06 -->
    <div class="card">
      <img class="card-img" src="https://via.placeholder.com/640x480/FFFF00/000000?text=Card 06" alt="...">
    </div>
    <!-- カード07 -->
    <div class="card p-3 text-right">
      <blockquote class="blockquote mb-0">
        <p>カード07</p>
        <p>文章</p>
        <footer class="blockquote-footer"> <small class="text-muted">文章</small> </footer>
      </blockquote>
    </div>
    <!-- カード08 -->
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">カード08</h4>
        <p class="card-text">文章</p>
        <p class="card-text"><small class="text-muted">文章</small></p>
      </div>
    </div>
  </div>

ドロップダウンメニューにdivでテキストを配置する:text-muted


  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu p-3 text-muted" style="max-width: 300px;">
      <p>メニュー内のテキストその1</p>
      <p class="text-danger">メニュー内のテキストその2</p>
    </div>
  </div>

影:Shadows


影なし(shadow-none)
小さめの影(shadow-sm)
標準の影(shadow)
大きめの影(shadow-lg)
  <div class="shadow-none p-3 mb-5 bg-light rounded">影なし(shadow-none)</div>
  <div class="shadow-sm p-3 mb-5 bg-light rounded">小さめの影(shadow-sm)</div>
  <div class="shadow p-3 mb-5 bg-light rounded">標準の影(shadow)</div>
  <div class="shadow-lg p-3 mb-5 bg-light rounded">大きめの影(shadow-lg)</div>