Bootstrap4移行ガイドを読む（コンポーネント編、リストグループ）

枠線で複数の要素が囲まれ、この要素ごとに仕切り線があるコンポーネント
リストに .list-group、リストの子要素に .list-group-item を指定することでこのコンポーネントは表示できる
リストの子要素をアクティブな見た目にしたいときは .active を指定する
リストの子要素を非アクティブな見た目にしたいときは .disabled を指定する
マウスオーバーなどの状態をリストの子要素に持たせるには、HTML 要素を a 要素や button 要素にした上で .list-group-item-action を指定する
リスト周囲の余白を表示しないようにするには .list-group-flush を指定する
リストの背景色を変更するにはカラーユーティリティクラスを使う
- 背景色を変えても .list-group-item-action は機能する
リストの線の色を変更するには境界ユーティリティクラスを使う
Flex ユーティリティクラスの力を借りながら、リストにバッジを表示することもできる
リストの子要素にヘッダーをつけたい場合は、Flex ユーティリティクラスを使って配置を整える
- リストコンポーネントにヘッダー用のクラスはない
リストグループを拡張すればタブを実装できる

nlog