Skip to content

Instantly share code, notes, and snippets.

@wmeredith
Created November 19, 2015 23:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wmeredith/15f21db91d6f3ff7a9f4 to your computer and use it in GitHub Desktop.
Save wmeredith/15f21db91d6f3ff7a9f4 to your computer and use it in GitHub Desktop.
5 Column Layout for Bootstrap 3 Using Less
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: $grid-gutter-width/2;
padding-left: $grid-gutter-width/2;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: $screen-sm) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: $screen-md) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: $screen-lg) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
@wmeredith
Copy link
Author

Usage:

<div class="container">
  <div class="row">
    <div class="col-md-5ths">
      This little piggie went to market...
    </div>
    <div class="col-md-5ths">
      This little piggie stayed home...
    </div>
    <div class="col-md-5ths">
      This little piggie had roast beef...
    </div>
    <div class="col-md-5ths">
      This little piggie had NONE...
    </div>
    <div class="col-md-5ths">
      And THIS little piggie went... WEE WEE WEE all the way home.
    </div>
  </div>
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment