Skip to content

Instantly share code, notes, and snippets.

@rjmoggach
Created March 11, 2016 22:08
Show Gist options
  • Save rjmoggach/316f3f2b66c26173c076 to your computer and use it in GitHub Desktop.
Save rjmoggach/316f3f2b66c26173c076 to your computer and use it in GitHub Desktop.
Bootstrap 4 Column Dividers
@import 'variables';
$divider-height: 100%;
@mixin make-column-dividers($breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints
%col-divider {
position: absolute;
content: " ";
top: (100% - $divider-height)/2;
height: $divider-height;
width: $hr-border-width;
background-color: $hr-border-color;
}
@each $breakpoint in map-keys($breakpoints) {
.col-#{$breakpoint}-divider-right:before {
@include media-breakpoint-up($breakpoint) {
@extend %col-divider;
right: 0;
}
}
.col-#{$breakpoint}-divider-left:before {
@include media-breakpoint-up($breakpoint) {
@extend %col-divider;
left: 0;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment