.row
や .col
を用いて、画面を N個のカラムに等分することができます。
<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>
.col-{n}
は、画面の横幅を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>
.col-{breakpoint}
や .col-{breakpoint}-{n}
を用いて、画面の広さに応じて、表示方法を変更することもできます。下記の例では、画面サイズが sm (Small:スマホサイズ)以上の時は 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>
.col-{breakpoint}-{n}
を用いて、画面サイズに応じてカラムの割合を変更することができます。下記の例では、sm (Small:スマホサイズ)以上の時には 4:4:4 の割合で、md (Medium:タブレットサイズ)以上の場合は 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-{n}
は定義されていません。代わりに .col-{n}
を使用します。詳細は ブレークポイント を参照してください。
.col-auto
, .col-{breakpoint}-auto
は、カラムの横幅を、カラムの内容に応じた自然な大きさにします。
<div class="container-fluid"> <div class="row"> <div class="my-box col-3">col-3</div> <div class="my-box col-auto">col-auto</div> <div class="my-box col-3">col-3</div> </div> </div>
.align-items-*
を用いて、行(row)を上寄せ、中央寄せ、下寄せすることができます。
<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-*
を用いて、カラム(col)を上寄せ、中央寄せ、下寄せすることができます。
<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-*
, .order-{breakpoint}-*
を指定することで、カラムを表示する順序を入れ替えることができます。下記の例では、カラムB と カラムC の表示順序を入れ替えて表示しています。* には 1~12 の値を指定することができます。.order-first
は最初、.order-last
は最後を指定します。
<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-{n}
, .offset-{breakpoint}-{n}
を指定することにより、カラム間に隙間を開けることができます。{n}
には 1
~11
の値を指定することができます。下記の例では 6 の幅のカラムA と、5 の幅のカラムC の間に 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-{breakpoint}-auto
, .ml-{breakpoint}-auto
は左側や右側に最大限のマージンをとります。mr は Margin Right を、ml は Margin Left を意味します。
<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>