Bootstrap 3 Horizontal and Vertical Divider

Question

I am having trouble to put in horizontal and vertical lines on my website. Not sure what\'s wrong with this.

I tried using borders but I am not sure if I am doing it rig

Answer 1

I made the following little scss mixin to build for all the bootstrap breakpoints...

With it I get .col-xs-divider-left or col-lg-divider-right etc.

Note: this uses v4-alpha bootstrap syntax...

@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;
            }
        }
    }
}