<

Create N column layout for Bootstrap

Published on
7,821 Points
1,221 Views
1 Endorsement
Last Modified:
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
Comment
0 Comments

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Join & Write a Comment

In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month