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
.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;
}
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.
.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%;
}
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%;
}
}
We repeat the above for md and lg replacing the sm in the above with the relevant width specifier.
.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;
}
Note the pull-5-0 style, this is an extra that is defined for push, pull and offset.
@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;
}
}
Again, we do the same for the md and lg media queries.
<!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>
.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;
}
}
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.
Comments (0)