Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Load this as part of your Bootstrap mixins.less make sure to also compile the responsive.less if needed.
// Adds centered columns.
/*
<div class="row">
<div class="center6">
<div class="span3">3</div>
<div class="span3">3</div>
</div>
</div>
*/
.makeCenterColumn(@columns) {
// Prevent columns from collapsing when empty
min-height: 1px;
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1) + @gridGutterWidth);
margin: 0 auto;
// Proper box-model (padding doesn't add to width)
.box-sizing(border-box);
.clearfix();
}
#grid {
.center (@gridColumnWidth, @gridGutterWidth) {
.centerX (@index) when (@index > 0) {
.center@{index} { .center(@index); }
.centerX(@index - 1);
}
.centerX (0) {}
.center (@columns) {
// Prevent columns from collapsing when empty
min-height: 1px;
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1) + @gridGutterWidth);
margin: 0 auto;
// Proper box-model (padding doesn't add to width)
.box-sizing(border-box);
.clearfix();
}
.centerX (@gridColumns);
}
}
#grid > .center(@gridColumnWidth, @gridGutterWidth);
@media (min-width: 768px) and (max-width: 979px) {
#grid > .center(@gridColumnWidth768, @gridGutterWidth768);
}
@media (min-width: 1200px) {
#grid > .center(@gridColumnWidth1200, @gridGutterWidth1200);
}
@media (max-width: 767px) {
[class*="center"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.