Responsive Borders

If you are like me, you find it annoying when Bootstrap allows responsive utlities for most things, but leaves out some pretty obvious ones that would benefit from being responsive. One of those being adding borders to your elements, and having that border only show on certain devices. To add this functionality, simply add the code below to your helpers.scss file (or really anywhere, but this helpers file is mostly there for custom elements like this).

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .border#{$infix}-top {      border-top: $border-width solid $border-color !important; }
    .border#{$infix}-right {    border-right: $border-width solid $border-color !important; }
    .border#{$infix}-bottom {   border-bottom: $border-width solid $border-color !important; }
    .border#{$infix}-left {     border-left: $border-width solid $border-color !important; }

    .border#{$infix}-top-0 {    border-top: 0 !important; }
    .border#{$infix}-right-0 {  border-right: 0 !important; }
    .border#{$infix}-bottom-0 { border-bottom: 0 !important; }
    .border#{$infix}-left-0 {   border-left: 0 !important; }

    .border#{$infix}-x {
      border-left: $border-width solid $border-color !important;
      border-right: $border-width solid $border-color !important;
    }

    .border#{$infix}-y {
      border-top: $border-width solid $border-color !important;
      border-bottom: $border-width solid $border-color !important;
    }
  }
}

Then you can can use your border classes like this:

.border-sm-left - makes a border on the left on screens small and up

.border-md-left - makes a border on the left on screens medium and up

.border-md - makes a border all the way around for screen medium up

And so on and so forth for all of the normal bootstrap border classes.

Tags: bs4, scss, styles, sass, border