Create N column layout for Bootstrap

Julian Hansen
CERTIFIED EXPERT
Published:
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.

Overview

Bootstrap column styles can be broken down into the following categories
 
  • The general styles that apply to all columns. (padding, height and position)
  • The specific column styles that start with the xs style as the default and then progressively add sm, md and lg with media queries.
  • The supplementary styles, push, pull and offset which then need to be created for each of the xs,sm,md and lg column widths.
 

Naming the style

The first step is to choose a name for the style. I am going to use the following convention (where N is replaced with the base column value you are adding)
 
col-xs-N-1, col-sm-N-1, col-md-N-1, col-lg-N-1
                      col-xs-N-2, col-sm-N-2, col-md-N-2, col-lg-N-2
                      ...
                      col-xs-N-N, col-sm-N-N, col-md-N-N, col-lg-N-N

Open in new window



Implement
I am going to use N=5 for this sample.


First we setup the general styles for our new columns. This is a cut and paste of the existing Bootstrap col- styles modifying the names to match our new convention
.col-xs-5-1, .col-sm-5-1, .col-md-5-1, .col-lg-5-1, 
                      .col-xs-5-2, .col-sm-5-2, .col-md-5-2, .col-lg-5-2, 
                      .col-xs-5-3, .col-sm-5-3, .col-md-5-3, .col-lg-5-3, 
                      .col-xs-5-4, .col-sm-5-4, .col-md-5-4, .col-lg-5-4, 
                      .col-xs-5-5, .col-sm-5-5, .col-md-5, .col-lg-5-5 {
                        position: relative;
                        min-height: 1px;
                        padding-right: 15px;
                        padding-left: 15px;
                      }
                      .col-xs-5-1, .col-xs-5-2, .col-xs-5-3, .col-xs-5-4, .col-xs-5-5 {
                        float: left;
                      }

Open in new window

Next comes the xs column definitions themselves. We are working on N=5 so each increment is 20%. For other values that might result in a fraction make sure you include 8 decimal places for your % values.
We use the same convention Bootstrap uses - listing the styles in descending order.
.col-xs-5-5 {
                        width: 100%;
                      }
                      .col-xs-5-4 {
                        width: 80%;
                      }
                      .col-xs-5-3 {
                        width: 60%;
                      }
                      .col-xs-5-2 {
                        width: 40%;
                      }
                      .col-xs-5-1 {
                        width: 20%;
                      }

Open in new window

Next, we need to define the styles for sm, md and lg. These need to be defined in Media queries in ascending order: sm then md then lg.

@media (min-width: 768px) {
                        .col-sm-5-1, .col-sm-5-2, .col-sm-5-3, .col-sm-5-4, .col-sm-5-5 {
                          float: left;
                        }
                        .col-sm-5-5 {
                          width: 100%;
                        }
                        .col-sm-5-4 {
                          width: 80%;
                        }
                        .col-sm-5-3 {
                          width: 60%;
                        }
                        .col-sm-5-2 {
                          width: 40%;
                        }
                        .col-sm-5-1 {
                          width: 20%;
                        }
                      }

Open in new window

We repeat the above for md and lg replacing the sm in the above with the relevant width specifier.

That should be enough for a basic 5 column layout. However, Bootstrap does include other column options (push, pull and offset) that we would need to implement before this solution is complete.


Additional column styles


We add the pull styles to xs as follows. Again this is simply a copy and paste from the existing Bootstrap files, changing the names and widths accordingly
.col-xs-pull-5-5 {
                        right: 100%;
                      }
                      .col-xs-pull-5-4 {
                        right: 80%;
                      }
                      .col-xs-pull-5-3 {
                        right: 60%;
                      }
                      .col-xs-pull-5-2 {
                        right: 40%;
                      }
                      .col-xs-pull-5-1 {
                        right: 20%;
                      }
                      .col-xs-pull-5-0 {
                        right: auto;
                      }

Open in new window

Note the pull-5-0 style, this is an extra that is defined for push, pull and offset.
We add the above to the media queries as well.
@media (min-width: 768px) {
                        .col-sm-5-1, .col-sm-5-2, .col-sm-5-3, .col-sm-5-4, .col-sm-5-5 {
                          float: left;
                        }
                        .col-sm-5-5 {
                          width: 100%;
                        }
                        ...
                        .col-sm-pull-5-5 {
                          right: 100%;
                        }
                        .col-sm-pull-5-4 {
                          right: 80%;
                        }
                        .col-sm-pull-5-3 {
                          right: 60%;
                        }
                        .col-sm-pull-5-2 {
                          right: 40%;
                        }
                        .col-sm-pull-5-1 {
                          right: 20%;
                        }
                        .col-sm-pull-5-0 {
                          right: auto;
                        }
                      }

Open in new window

Again, we do the same for the md and lg media queries.

For the push and offset we repeat the above simply changing the pull to push / offset in each case.

That is all there is to it - we now have a complete Bootstrap style for a 5 column layout.
A full listing of the stylesheet is available later in this document
 

Example Code

The following code demonstrates some of the features of the new 5 column layout borrowing from Bootstrap's grid sample.

<!doctype html>
                      <html>
                      <head>
                      <title>Create 5 column styles for Bootstrap</title>
                      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
                      <link href="bootstrap-5-col.css" rel="stylesheet" />
                      <style type="text/css">
                      .show-grid [class^="col-"] {
                        background-color: rgba(86, 61, 124, 0.15);
                        border: 1px solid rgba(86, 61, 124, 0.2);
                        padding-bottom: 10px;
                        padding-top: 10px;
                      }
                      </style>
                      </head>
                      <body>
                          <div class="container">
                          <h2>Stacked-to-horizontal</h2>
                      	<div class="row show-grid">
                      		<div class="col-sm-5-1">.col-sm-5-1</div>
                      		<div class="col-sm-5-1">.col-sm-5-1</div>
                      		<div class="col-sm-5-1">.col-sm-5-1</div>
                      		<div class="col-sm-5-1">.col-sm-5-1</div>
                      		<div class="col-sm-5-1">.col-sm-5-1</div>
                      	</div>
                      	<div class="row show-grid">
                      		<div class="col-sm-5-2">.col-sm-5-2</div>
                      		<div class="col-sm-5-3">.col-sm-5-3</div>
                      	</div>
                      	<div class="row show-grid">
                      		<div class="col-sm-5-5">.col-sm-5-5</div>
                      	</div>
                      	<br/>
                      	<h2>Offsets</h2>
                      	<div class="row show-grid">
                      		<div class="col-md-5-3">.col-md-5-3</div>
                      		<div class="col-md-5-2 col-md-offset-5-2">.col-md-5-2 .col-md-offset-5-2</div>
                      		</div>
                      	<div class="row show-grid">
                      		<div class="col-md-5-1 col-md-offset-5-1">.col-md-5-1 col-md-offset-5-1</div>
                      		<div class="col-md-5-1 col-md-offset-5-1">.col-md-5-1 col-md-offset-5-1</div>
                      	</div>
                      	<div class="row show-grid">
                      		<div class="col-md-5-3 col-md-offset-5-2">.col-md-5-3 .col-md-offset-5-1</div>
                      	</div>	
                          </div>
                      </body>
                      </html>

Open in new window


You can see a working sample here

Full stylesheet


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

Open in new window

1
3,150 Views
Julian Hansen
CERTIFIED EXPERT

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.