Skip to content

Instantly share code, notes, and snippets.

@erikflowers
Last active December 21, 2015 06:19
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save erikflowers/6263630 to your computer and use it in GitHub Desktop.
Save erikflowers/6263630 to your computer and use it in GitHub Desktop.
If you are building your Bootstrap 3 grid entirely using mixins, you need to declare a base column mixin for proper, full width columns at the smallest level. Otherwise, they lack the proper padding, min-height, and position as the same HTML markup column would have by default. This is used by adding .make-column(); at the base level before you …
// Generate a mixin for mobile full width columns, to maintain the same attributes
.make-column(@gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
// How you use this
.this-is-your-row {
.make-row();
.this-is-your-column {
.make-column(); // This makes the smallest column have the right padding
@media(min-width: @screen-tablet) {
.make-md-column(6); // This is what you wanted for your grid
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment