5 Column Layout with Bootstrap

Recently Shamley Incorporated received a client request for a new feature that required a 5 column layout. We have been using Bootstrap 3.x for this site which makes most layouts very easy, however there is no way to make it work for 5 even columns. Luckily it is pretty simple to add your own Bootstrap layouts, the below code pattern will give you a nice feature set for building your 5 column layout with the options shown in the image.


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

Check out the below pen for a working example of the 5 column layout.

See the Pen Bootstrap 5 Column Layout by Jeff Shamley (@jshamley) on CodePen.

Add new comment