※分かりやすいように枠線や色付けを行っていますが、別のスタイルシートを設けています。
bootstrapは、基本的に背景色・テキストの色・サイズ・配置に関するをあまり含んでいないです。
それぞれのサイズに応じて記述を行ったサンプルを準備しました。ウィンドウのサイズをドラッグで拡大縮小して、見比べてみてください。
"xl"(1200px)以上のビューポートがある時、１行に６アイテム
それを下回ると３行に２アイテムずつ
※PCの画面サイズによっては、最大画面でも変化しない場合があります。
"lg"(992px)以上のビューポートがある時、２行に４アイテムずつ
それを下回ると４行に２アイテムずつ
※PCの画面サイズによっては、最大画面でも変化しない場合があります。
md(768px)以上のビューポートがある時、２行に３アイテムずつ
それを下回ると３行に２アイテムずつ
sm(576px)以上のビューポートがある時、３行に２アイテムずつ
それを下回ると１アイテムで縦並び
※この場合は、"col-XX"の記述をしなくてもいいのですが記述のルーティンを統一した方が読み取りやすいので設定しております。
複数のブレイクポイントに対する記述も勿論可能です。
"lg"(992px)以上のビューポートがある時、２行に６アイテムずつ
それを下回るが"md"(768px)以上の時、３行に４アイテムずつ
さらに下回るが"sm"(576px)以上の時、６行に２アイテムずつ
それ以下の場合は、１列で縦並び
※PCの画面サイズによっては、最大画面でも変化しない場合があります。