Bootstrapは12分割のグリッドを採用しているため、通常は5等分されたレイアウトを実現することができません。
しかし、コンテンツやデザインの都合上、5分割したい場面も少なくないと思います。
そこで、この記事ではBootstrapの仕様に沿った形のcssを自前で作成し、5カラムレイアウトを実現する方法を紹介します。Bootstrap4・5、どちらにも対応しています。
Bootstrapで5カラムレイアウト
サンプルのHTMLとCSSはこちら。
HTML
<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>
CSS
/* 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」それぞれのメディアクエリを追記すれば実現できます。
Related Posts