■レイアウト:Flex d-flex:ユーティリティ:flex交差軸方向の整列 align-items-center
flex文字01
flex文字02
flex文字03
<div class="d-flex align-items-center" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■リストグループ:list-group:コンポーネント:バッジ付きリストグループ
- リスト項目1 14
- リスト項目2 2
- リスト項目3 1
<section class="w-50 m-auto my-5">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト項目1
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト項目2
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト項目3
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</section>