Bootstrapで5カラムのレイアウトを実装する

Bootstrap2017.9.1

最終更新日：2018.1.7 Update!!

レスポンシブコーディングを行うときに便利なBootstrapですが、あらかじめカラムのレイアウトが決まっているため制限があるのが悩みどころです。中でも5カラムにしたいという場合は少し工夫しないと難しいようです。今回はBootstrapで5カラムのレイアウトを実装するケースをまとめていきたいと思います。

1. 左に1カラム分の余白を入れる

元々Bootstrapにあるoffsetクラスを使用して、左に1カラム分の余白を入れて右を空けることで余白を出す方法です。大きな改修もなく、5カラムで中央寄せにできますが左右に余白ができてしまいます。【HTML】

<div class="row">
  <div class="offset-md-1 col-md-2">カラム1</div>
  <div class="col-md-2">カラム2</div>
  <div class="col-md-2">カラム3</div>
  <div class="col-md-2">カラム4</div>
  <div class="col-md-2">カラム5</div>
</div>

2. Bootstrap3で5カラム用のスタイルを作成する

新たに5カラム用のスタイルを作成し、要素に適用させる方法です。少し手間はかかりますが、本来のBootstrapに近い方法でコーディングすることができます。こちらはfloatを使用したBootstrap3での方法になります。Sassを使うと変数で管理できるので便利です。【HTML】

<div class="row">
  // 5等分の5カラムレイアウト
  <div class="col-md-five-1">カラム1</div>
  <div class="col-md-five-1">カラム2</div>
  <div class="col-md-five-1">カラム3</div>
  <div class="col-md-five-1">カラム4</div>
  <div class="col-md-five-1">カラム5</div>
</div>
<div class="row">
  // 変則的な5カラムレイアウト（合計が5になるように）
  <div class="col-md-five-3">3カラム分（5分の3）</div>
  <div class="col-md-five-2">2カラム分（5分の2）</div>
</div>

【CSS】

.col-lg-five-1, .col-md-five-1, .col-sm-five-1, .col-xs-five-1,
.col-lg-five-2, .col-md-five-2, .col-sm-five-2, .col-xs-five-2,
.col-lg-five-3, .col-md-five-3, .col-sm-five-3, .col-xs-five-3,
.col-lg-five-4, .col-md-five-4, .col-sm-five-4, .col-xs-five-4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}   
.col-xs-five-1 {
  width: 20%;
  float: left;
}
.col-xs-five-2 {
  width: 40%;
  float: left;
}
.col-xs-five-3 {
  width: 60%;
  float: left;
}
.col-xs-five-4 {
  width: 80%;
  float: left;
}
@media (min-width: 768px) {
  .col-sm-five-1 {
    width: 20%;
    float: left;
  }
  .col-sm-five-2 {
    width: 40%;
    float: left;
  }
  .col-sm-five-3 {
    width: 60%;
    float: left;
  }
  .col-sm-five-4 {
    width: 80%;
    float: left;
  }
}
@media (min-width: 992px) {
  .col-md-five-1 {
    width: 20%;
    float: left;
  }
  .col-md-five-2 {
    width: 40%;
    float: left;
  }
  .col-md-five-3 {
    width: 60%;
    float: left;
  }
  .col-md-five-4 {
    width: 80%;
    float: left;
  }
}
@media (min-width: 1200px) {
  .col-lg-five-1 {
    width: 20%;
    float: left;
  }
  .col-lg-five-2 {
    width: 40%;
    float: left;
  }
  .col-lg-five-3 {
    width: 60%;
    float: left;
  }
  .col-lg-five-4 {
    width: 80%;
    float: left;
  }
}

【SCSS】

$grid-gutter-width: 30px;
.col-lg-five-1, .col-md-five-1, .col-sm-five-1, .col-xs-five-1,
.col-lg-five-2, .col-md-five-2, .col-sm-five-2, .col-xs-five-2,
.col-lg-five-3, .col-md-five-3, .col-sm-five-3, .col-xs-five-3,
.col-lg-five-4, .col-md-five-4, .col-sm-five-4, .col-xs-five-4 {
  position: relative;
  min-height: 1px;
  padding-left:  ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
} 
@for $i from 1 through 4 {
  .col-xs-five-#{$i} {
    float: left;
    width: percentage($i / 5);
  }
  @media (min-width: 768px) {
    .col-sm-five-#{$i}-5 {
      float: left;
      width: percentage($i / 5);
    }
  }
  @media (min-width: 992px) {
    .col-md-five-#{$i}-5 {
      float: left;
      width: percentage($i / 5);
    }
  }
  @media (min-width: 1200px) {
    .col-lg-five-#{$i}-5 {
      float: left;
      width: percentage($i / 5);
    }
  }
}

3. Bootstrap4で5カラム用のスタイルを作成する

Bootstrap4ではflexbox対応になっていますので記述するスタイルも少し異なります。それ以外は先ほどのBootstrap3の時と似たような形で実装できます。【HTML】

<div class="row">
  // 5等分の5カラムレイアウト
  <div class="col-md-five-1">カラム1</div>
  <div class="col-md-five-1">カラム2</div>
  <div class="col-md-five-1">カラム3</div>
  <div class="col-md-five-1">カラム4</div>
  <div class="col-md-five-1">カラム5</div>
</div>
<div class="row">
  // 変則的な5カラムレイアウト（合計が5になるように）
  <div class="col-md-five-3">3カラム分（5分の3）</div>
  <div class="col-md-five-2">2カラム分（5分の2）</div>
</div>

【SCSS】

$grid-gutter-width: 30px;
.col-xl-five-1, .col-lg-five-1, .col-md-five-1, .col-sm-five-1, .col-xs-five-1,
.col-xl-five-2, .col-lg-five-2, .col-md-five-2, .col-sm-five-2, .col-xs-five-2,
.col-xl-five-3, .col-lg-five-3, .col-md-five-3, .col-sm-five-3, .col-xs-five-3,
.col-xl-five-4, .col-lg-five-4, .col-md-five-4, .col-sm-five-4, .col-xs-five-4 {
  position: relative;
  min-height: 1px;
  padding-left:  ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
} 
.col-xs-five-1 {
  width: 20%;
  flex: 0 0 20%;
  float: left;
}
.col-xs-five-2 {
  width: 40%;
  flex: 0 0 40%;
  float: left;
}
.col-xs-five-3 {
  width: 60%;
  flex: 0 0 60%;
  float: left;
}
.col-xs-five-4 {
  width: 80%;
  flex: 0 0 80%;
  float: left;
}
@media (min-width: map-get($grid-breakpoints,sm)) {
  .col-sm-five-1 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
  .col-sm-five-2 {
    width: 40%;
    flex: 0 0 40%;
    float: left;
  }
  .col-sm-five-3 {
    width: 60%;
    flex: 0 0 60%;
    float: left;
  }
  .col-sm-five-4 {
    width: 80%;
    flex: 0 0 80%;
    float: left;
  }
}
@media (min-width: map-get($grid-breakpoints,md)) {
  .col-md-five-1 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
  .col-md-five-2 {
    width: 40%;
    flex: 0 0 40%;
    float: left;
  }
  .col-md-five-3 {
    width: 60%;
    flex: 0 0 60%;
    float: left;
  }
  .col-md-five-4 {
    width: 80%;
    flex: 0 0 80%;
    float: left;
  }
  .col-md-offset-five-1 {
    margin-left: 4.3333333%;
  }
}
@media (min-width: map-get($grid-breakpoints,lg)) {
  .col-lg-five-1 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
  .col-lg-five-2 {
    width: 40%;
    flex: 0 0 40%;
    float: left;
  }
  .col-lg-five-3 {
    width: 60%;
    flex: 0 0 60%;
    float: left;
  }
  .col-lg-five-4 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
}
@media (min-width: map-get($grid-breakpoints,xl)) {
  .col-xl-five-1 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
  .col-xl-five-2 {
    width: 40%;
    flex: 0 0 40%;
    float: left;
  }
  .col-xl-five-3 {
    width: 60%;
    flex: 0 0 60%;
    float: left;
  }
  .col-xl-five-4 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
}

今回のサンプルはこちらに用意しました。5カラムが実装できるとデザインの幅も広がり柔軟に対応できるかと思いますのでぜひ試してみてはいかがでしょうか。（参考） 5 equal columns Bootstrap grid layout with 1, 2, 3, 4 of five bootstrap4での5カラム使用