Bootstrapで5カラムレイアウトを実現する方法（標準ユーティリティとカスタムCSS）

「Bootstrapで5等分のレイアウトを組みたいのに、うまくいかない」——私も一度は必ずぶつかる壁です。Bootstrapのグリッドは12分割が前提なので、12は5で割り切れません。だから4カラム（col-3）や6カラム（col-2）は素直に作れても、5カラムだけは標準クラスの組み合わせでは実現できないわけです。

ただ、製品一覧やメニューのように「横並びで均等に5つ見せたい」という場面は意外と多いもの。そこでこの記事では、5カラムを作る方法を2通り紹介します。まずBootstrap 4.4以降と5で使える標準ユーティリティ「row-cols-5」、続いて幅を細かく制御したいとき向けのカスタムCSSです。バージョンに合わせて使い分けてください。

関連記事：CSSで使える正規表現風セレクタの活用法！コード効率化テクニック

いちばん簡単なのは標準の「row-cols-5」

実は、Bootstrap 4.4以降と5には row-cols-* というユーティリティが用意されていて、これを使えばカスタムCSSなしで5カラムが作れます。row-cols-* は個々のカラムではなく、親の .row に対して「1行あたり何カラム並べるか」を指定するショートカットです。

公式ドキュメントでも「.row-cols-* クラスで、コンテンツやレイアウトにいちばん合うカラム数を手早く指定できる」と説明されています。設定できる上限はSass変数 $grid-row-columns で決まり、初期値は 6。つまり row-cols-5 は範囲内なので問題なく使えます。

row-cols-5 の書き方

子要素は幅指定のない .col にしておくだけ。あとは親の .row に row-cols-5 を付ければ、5つが自動で均等幅（20%）に並びます。

<div class="container">
    <div class="row row-cols-5">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

レスポンシブにしたいときは row-cols-1 row-cols-md-5 のようにブレークポイント付きで重ねられます。この例なら、スマホでは1列、中サイズ以上では5列に切り替わります。新しくコードを書けるプロジェクトなら、まずこの方法を選ぶのがいちばん手間がかかりません。

幅を自分で決めたいならカスタムCSSで20%クラスを作る

row-cols-* が使えない古いバージョンだったり、余白（ガター）や幅を自分で細かく制御したい場合は、20%幅のカスタムクラスを用意する方法が確実です。12分割の枠にとらわれず、Bootstrapのグリッドと同じ感覚で使えるクラスを自作します。

サンプルHTML

標準の .row の中に、自作の .col-5ths を5つ並べます。

<div class="container">
    <div class="row">
        <div class="col-5ths">1</div>
        <div class="col-5ths">2</div>
        <div class="col-5ths">3</div>
        <div class="col-5ths">4</div>
        <div class="col-5ths">5</div>
    </div>
</div>

サンプルCSS

Bootstrap 4・5のグリッドはFlexboxで組まれています。公式ドキュメントにも「グリッドはFlexboxで作られており、幅を指定しないカラムは自動で均等幅になる」とあるとおりで、5等分なら flex: 0 0 20% と max-width: 20% を指定すれば実現できます。

/* 5 columns（20%幅） */
.col-5ths {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 100%;
    max-width: 100%;
}

/* sm: 576px以上 */
@media (min-width: 576px) {
    .col-5ths { flex: 0 0 20%; max-width: 20%; }
}

スマホなど狭い画面では1列（100%）で縦積みにし、576px以上で5等分に切り替える例です。Bootstrapのブレークポイントは最小幅のメディアクエリで、下から順に sm=576px、md=768px、lg=992px、xl=1200px、（5では xxl=1400px も）となっています。「タブレット以上で5列にしたい」なら 768px、「大画面だけ」なら 992px のように、切り替えたい境目に合わせて数値を変えてください。

ここがポイント

flex: 0 0 20% … カラムを縮まず伸ばさず20%幅に固定
max-width: 20% … 中身が多くても20%を超えないように
padding 15px … Bootstrapのガター（列間の余白）に合わせる

6カラムやその他の分割にも応用できる

幅の数値を変えるだけで、任意のカラム数に応用できます。分割数で100%を割った値を入れればOKです。

3カラム：33.33%
6カラム：16.66%
8カラム：12.5%

なお6カラムまでなら、前述の row-cols-6 でも同じことができます。カスタムCSSは「7列以上」や「幅を厳密にそろえたい」ときの選択肢と考えると使い分けが整理しやすいはずです。

まとめ

Bootstrapで5カラムを作る近道は、バージョンで変わります。4.4以降・5なら、まず row-cols-5 を試すのが最短で、CSSを1行も足さずに済みます。それより古い環境や、幅・余白を自分で握りたい場面では、flex: 0 0 20% を使ったカスタムクラスが確実です。

どちらもFlexboxベースのグリッドの上に乗るので、レスポンシブの強みはそのまま活かせます。使っているBootstrapのバージョンを確認して、合うほうで組んでみてください。