Applying borders on elements depending on device size with bootstrap

Question

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?

Answer 1

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...