下記の例では、画面を 5個のカラムに等分します。
<div class="container-fluid"> <div class="row"> <div class="col">A</div> <div class="col">B</div> <div class="col">C</div> <div class="col">D</div> <div class="col">E</div> </div> </div>
.w-100
で width: 100% の div を入れることで、強制的に改行することができます。
<div class="container-fluid"> <div class="row"> <div class="col">A</div> <div class="col">B</div> <div class="col">C</div> <div class="w-100"></div> <div class="col">D</div> <div class="col">E</div> </div> </div>
カラム指定では、画面の横幅を 12個のカラムに分割し、そのうちの何個分を使用するかを指定します。下記の例では 6個分、3個分、3個分のカラムに区切って表示します。
<div class="container-fluid"> <div class="row"> <div class="col-6">col-6</div> <div class="col-3">col-3</div> <div class="col-3">col-3</div> </div> </div>
カラムの合計が 12 を超える場合は複数行で表示します。
<div class="container-fluid"> <div class="row"> <div class="col-6">col-6</div> <div class="col-3">col-3</div> <div class="col-3">col-3</div> <div class="col-3">col-3</div> </div> </div>
画面の広さに応じて、表示方法を変更することもできます。下記の例では、画面サイズが sm 以上の時(576px以上の時)は 3分割となり、それより小さい場合は縦方向に並びます。
<div class="container-fluid"> <div class="row"> <div class="col-sm">A</div> <div class="col-sm">B</div> <div class="col-sm">C</div> </div> </div>
下記の例では、sm サイズの時には 4:4:4 の割合で、md サイズ以上の場合は 2:8:2 の割合で、sm サイズより小さな場合は縦方向に並びます。
<div class="container-fluid"> <div class="row"> <div class="col-sm-4 col-md-2">A</div> <div class="col-sm-4 col-md-8">B</div> <div class="col-sm-4 col-md-2">C</div> </div> </div>
col-xs-*
は定義されていません。代わりに col-*
を使用します。
<div class="container-fluid"> <div class="row"> <div class="col-4 col-md-2">A</div> <div class="col-4 col-md-8">B</div> <div class="col-4 col-md-2">C</div> </div> </div>
align-items-*
を指定することで、上寄せ、中央寄せ、下寄せすることができます。
<div class="container-fluid"> <div class="row align-items-start"> <div class="col">A</div> <div class="col">B</div> </div> <div class="row align-items-center"> <div class="col">A</div> <div class="col">B</div> </div> <div class="row align-items-end"> <div class="col">A</div> <div class="col">B</div> </div> </div>
align-self-*
を指定することで、カラムをそれぞれ個別に上寄せ、中央寄せ、下寄せすることができます。
<div class="container-fluid"> <div class="row"> <div class="col align-self-start">A</div> <div class="col align-self-center">B</div> <div class="col align-self-end">C</div> </div> </div>
justify-content-*
を用いることよより、横方向の配置を指定することができます。start は左寄せ、center は中央寄せ、end は右寄せ、around は左右に適度なスペースを入れる、between はカラム間に適度なスペースを入れます。
<div class="container-fluid"> <div class="row justify-content-start"> : </div> <div class="row justify-content-center"> : </div> <div class="row justify-content-end"> : </div> <div class="row justify-content-around"> : </div> <div class="row justify-content-between"> : </div> </div>
order-*
を指定することで、カラムを表示する順序を入れ替えることができます。下記の例では、カラムB と カラムC の表示順序を入れ替えて表示しています。* には 1~12 の値を指定することができます。order-first
は最初、order-last
は最後を指定します。order-sm-3
の様に、特定の画面サイズの時に適用するオーダーを指定することもできます。
<div class="container-fluid"> <div class="row> <div class="col order-1">A</div> <div class="col order-3">B</div> <div class="col order-2">C</div> </div> </div>
offset-*
を指定することにより、カラム間に隙間を開けることができます。下記の例では 6 の幅のカラムA と、5 の幅のカラムC の間に 1の幅のオフセットを指定しています。offset-sm-1
の様に、特定の画面サイズの時にオフセットを指定することもできます。
<div class="container-fluid"> <div class="row"> <div class="col-6">A</div> <div class="col-5 offset-1">C</div> </div> </div>
mr-auto
は右側に、ml-auto
は左側に最大限のマージンをとります。
<div class="container-fluid"> <div class="row"> <div class="col-3">A</div> <div class="col-3 ml-auto">B</div> </div> </div>
下記の様に、グリッドを入れ子にすることも可能です。
<div class="container-fluid"> <div class="row"> <div class="col-6">A <div class="row"> <div class="col-4">X</div> <div class="col-4">Y</div> <div class="col-4">Z</div> </div> </div> <div class="col-6">B</div> </div> </div>
no-gutters
を指定すると、カラムのガーター(左右のパディング)を無くすことができます。row
に設定されていた -15px のマイナスマージンも削除されるため、全体の横幅は短くなります。
<div class="row"> : </div> <div class="row no-gutters"> : </div> <div class="container-fluid"> <div class="row"> : </div> </div> <div class="container-fluid"> <div class="row no-gutters"> : </div> </div>