Answer the question
In order to leave comments, you need to log in
Does anyone have a bootstrap-grid mixin for sass?
I tried to pull the mixin folder from the repository, but everything is going wrong for me
.block{
@include make-md-column(4);
@include make-lg-column(6);
}
.block {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 992px) {
.block {
float: left;
width: 33.33333%;
}
}
@media (min-width: 1200px) {
.block {
float: left;
width: 50%;
}
}
Answer the question
In order to leave comments, you need to log in
Use version 4 https://github.com/twbs/bootstrap/tree/v4-dev/scss
Grids and breakpoints
.block {
@include make-col;
@include make-col-span(8);
@include media-breakpoint-up(md) {
@include make-col-span(4);
}
}
v4-alpha.getbootstrap.com/layout/grid/#example-usage
// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);
@include clearfix();
}
// Make the element grid-ready (applying everything but the width)
@mixin make-col($gutter: $grid-gutter-width) {
position: relative;
float: left;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
// Set a width (to be used in or out of media queries)
@mixin make-col-span($columns) {
width: percentage(($columns / $grid-columns));
}
// Get fancy by offsetting, or changing the sort order
@mixin make-col-offset($columns) {
margin-left: percentage(($columns / $grid-columns));
}
@mixin make-col-push($columns) {
left: percentage(($columns / $grid-columns));
}
@mixin make-col-pull($columns) {
right: percentage(($columns / $grid-columns));
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question