<

Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x

Create N column layout for Bootstrap

Published on
5,295 Points
695 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
0 Comments

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month