<

[Webinar] Streamline your web hosting managementRegister Today

x

Create N column layout for Bootstrap

Published on
6,522 Points
922 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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 style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month