Bootstrapで5カラム(5分割)レイアウトを実現する方法

Bootstrapは12分割のグリッドを採用しているため、通常は5等分されたレイアウトを実現することができません。

しかし、コンテンツやデザインの都合上、5分割したい場面も少なくないと思います。

そこで、この記事ではBootstrapの仕様に沿った形のcssを自前で作成し、5カラムレイアウトを実現する方法を紹介します。Bootstrap4・5、どちらにも対応しています。

Bootstrapで5カラムレイアウト

サンプルのHTMLとCSSはこちら。

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

/* 5 Columns */
.col-15, .col-sm-15, .col-md-15, .col-lg-15 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}
@media (min-width: 768px) {
.col-sm-15 {
	width: 20%;
	flex: 0 0 20%;
}
}
@media (min-width: 992px) {
.col-md-15 {
	width: 20%;
	flex: 0 0 20%;
}
}
@media (min-width: 1200px) {
.col-lg-15 {
	width: 20%;
	flex: 0 0 20%;
}
}

Bootstrapの仕様に沿って「sm・md・lg」それぞれのメディアクエリを追記すれば実現できます。