'Applying borders on elements depending on device size with bootstrap

I'm using bootstrap to create a mobile first responsive layout and have various rows and columns set up that I adjust for the different categories of screen size.

I am wondering if there are pure bootstrap styling classes that would allow me to apply and remove borders for the different sizes, without having to create my own css media queries.

For example, if I wanted to have a border-right on the first column in a row only when it's floated at medium size... I know this is not real code, but is there something to the same affect that I'm too dumb to find?

<div class="row">
    <div class="col-12 col-md-6 border border-top-0 border-right-0 border-bottom-0 border-left-0 border-md-right-1">
        <p>Lorem ipsum</p>
    </div>
    <div class="col-12 col-md-6">
        <p>Dolor sit amet</p>
    </div>
</div>

I'm also using the maxcdn css so can't get into the sass. Any suggestions?

Solution 1:^[1]

There is no support for it. But adding own code will fix it. Based on @sharan answer (thx!) I've made some modifications if you want to define all border at once. Original: https://stackoverflow.com/a/57089704/5677177

My version for SCSS:

@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;
    }
    // support of .border-sm (-md, -lg, -xl)
    .border#{$infix} {
      border-top: $border-width solid $border-color !important;
      border-bottom: $border-width solid $border-color !important;
      border-left: $border-width solid $border-color !important;
      border-right: $border-width solid $border-color !important;
    }
    .border#{$infix}-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }
}

My version for CSS, compiled version:

@media (min-width: 576px) {
  .border-sm-top {
    border-top: 1px solid #e3e7eb !important;
  }
  .border-sm-right {
    border-right: 1px solid #e3e7eb !important;
  }
  .border-sm-bottom {
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-sm-left {
    border-left: 1px solid #e3e7eb !important;
  }
  .border-sm-top-0 {
    border-top: 0 !important;
  }
  .border-sm-right-0 {
    border-right: 0 !important;
  }
  .border-sm-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-sm-left-0 {
    border-left: 0 !important;
  }
  .border-sm-x {
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-sm-y {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-sm {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-sm-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 768px) {
  .border-md-top {
    border-top: 1px solid #e3e7eb !important;
  }
  .border-md-right {
    border-right: 1px solid #e3e7eb !important;
  }
  .border-md-bottom {
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-md-left {
    border-left: 1px solid #e3e7eb !important;
  }
  .border-md-top-0 {
    border-top: 0 !important;
  }
  .border-md-right-0 {
    border-right: 0 !important;
  }
  .border-md-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-md-left-0 {
    border-left: 0 !important;
  }
  .border-md-x {
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-md-y {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-md {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-md-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 992px) {
  .border-lg-top {
    border-top: 1px solid #e3e7eb !important;
  }
  .border-lg-right {
    border-right: 1px solid #e3e7eb !important;
  }
  .border-lg-bottom {
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-lg-left {
    border-left: 1px solid #e3e7eb !important;
  }
  .border-lg-top-0 {
    border-top: 0 !important;
  }
  .border-lg-right-0 {
    border-right: 0 !important;
  }
  .border-lg-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-lg-left-0 {
    border-left: 0 !important;
  }
  .border-lg-x {
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-lg-y {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-lg {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-lg-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

@media (min-width: 1200px) {
  .border-xl-top {
    border-top: 1px solid #e3e7eb !important;
  }
  .border-xl-right {
    border-right: 1px solid #e3e7eb !important;
  }
  .border-xl-bottom {
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-xl-left {
    border-left: 1px solid #e3e7eb !important;
  }
  .border-xl-top-0 {
    border-top: 0 !important;
  }
  .border-xl-right-0 {
    border-right: 0 !important;
  }
  .border-xl-bottom-0 {
    border-bottom: 0 !important;
  }
  .border-xl-left-0 {
    border-left: 0 !important;
  }
  .border-xl-x {
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-xl-y {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
  }
  .border-xl {
    border-top: 1px solid #e3e7eb !important;
    border-bottom: 1px solid #e3e7eb !important;
    border-left: 1px solid #e3e7eb !important;
    border-right: 1px solid #e3e7eb !important;
  }
  .border-xl-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

Solution 2:^[2]

In Bootstrap5 you can modify the utilities : https://getbootstrap.com/docs/5.1/utilities/api/#enable-responsive

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, 
  (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
    "border-top": map-merge(
      map-get($utilities, "border-top"),
      ( responsive: true ),
    ),
    "border-end": map-merge(
      map-get($utilities, "border-end"),
      ( responsive: true ),
    ),
    "border-bottom": map-merge(
      map-get($utilities, "border-bottom"),
      ( responsive: true ),
    ),
    "border-start": map-merge(
      map-get($utilities, "border-start"),
      ( responsive: true ),
    ),
  )
);

Compiled CSS will be like:

  .border-sm {
    border: 1px solid #e9ecef !important;
  }

  .border-sm-0 {
    border: 0 !important;
  }

  .border-top-sm {
    border-top: 1px solid #e9ecef !important;
  }

  .border-top-sm-0 {
    border-top: 0 !important;
  }

  .border-end-sm {
    border-right: 1px solid #e9ecef !important;
  }

  .border-end-sm-0 {
    border-right: 0 !important;
  }

  .border-bottom-sm {
    border-bottom: 1px solid #e9ecef !important;
  }

  .border-bottom-sm-0 {
    border-bottom: 0 !important;
  }

  .border-start-sm {
    border-left: 1px solid #e9ecef !important;
  }

  .border-start-sm-0 {
    border-left: 0 !important;
  }

...continues...

Solution 3:^[3]

This is the css for all screen sizes

@media (max-width: 575px) {
    .border-top {
        border-top: 1px solid #424242;
    }
    .border-left {
        border-left: 1px solid #424242;
    }
    .border-bottom {
        border-bottom: 1px solid #424242;
    }
    .border-right {
        border-right: 1px solid #424242;
    }
    .border-top-0 {
        border-top: none!important;
    }
    .border-left-0 {
        border-left: none!important;
    }
    .border-bottom-0 {
        border-bottom: none!important;
    }
    .border-right-0 {
        border-right: none!important;
    }
}

@media (min-width: 576px) {
    .border-sm-top {
        border-top: 1px solid #424242;
    }
    .border-sm-left {
        border-left: 1px solid #424242;
    }
    .border-sm-bottom {
        border-bottom: 1px solid #424242;
    }
    .border-sm-right {
        border-right: 1px solid #424242;
    }
    .border-sm-top-0 {
        border-top: none!important;
    }
    .border-sm-left-0 {
        border-left: none!important;
    }
    .border-sm-bottom-0 {
        border-bottom: none!important;
    }
    .border-sm-right-0 {
        border-right: none!important;
    }
}

@media (min-width: 768px) {
    .border-md-top {
        border-top: 1px solid #424242;
    }
    .border-md-left {
        border-left: 1px solid #424242;
    }
    .border-md-bottom {
        border-bottom: 1px solid #424242;
    }
    .border-md-right {
        border-right: 1px solid #424242;
    }
    .border-md-top-0 {
        border-top: none!important;
    }
    .border-md-left-0 {
        border-left: none!important;
    }
    .border-md-bottom-0 {
        border-bottom: none!important;
    }
    .border-md-right-0 {
        border-right: none!important;
    }
}

@media (min-width: 992px) {
    .border-lg-top {
        border-top: 1px solid #424242;
    }
    .border-lg-left {
        border-left: 1px solid #424242;
    }
    .border-lg-bottom {
        border-bottom: 1px solid #424242;
    }
    .border-lg-right {
        border-right: 1px solid #424242;
    }
    .border-lg-top-0 {
        border-top: none!important;
    }
    .border-lg-left-0 {
        border-left: none!important;
    }
    .border-lg-bottom-0 {
        border-bottom: none!important;
    }
    .border-lg-right-0 {
        border-right: none!important;
    }
}

@media (min-width: 1200px) {
    .border-xl-top {
        border-top: 1px solid #424242;
    }
    .border-xl-left {
        border-left: 1px solid #424242;
    }
    .border-xl-bottom {
        border-bottom: 1px solid #424242;
    }
    .border-xl-right {
        border-right: 1px solid #424242;
    }
    .border-xl-top-0 {
        border-top: none!important;
    }
    .border-xl-left-0 {
        border-left: none!important;
    }
    .border-xl-bottom-0 {
        border-bottom: none!important;
    }
    .border-xl-right-0 {
        border-right: none!important;
    }
}

Solution 4:^[4]

No, there are not pure bootstrap styling classes for apply and remove borders. You have to create your own rules to override them.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	SUHAIL KC
Solution 3	Ahsan Khan
Solution 4	Quentin Pradet

'Applying borders on elements depending on device size with bootstrap

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]