Search code examples
sassbootstrap-5

Bootstrap 5.3 extended options for border bottom sizing

According to examples displayed on the official Bootstrap guide for borders, it appears easy to adjust the border width sizing when using the border class...

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

But how can we make use of these same sizing options if we are only wanting to use border bottom, for example...

<span class="border-bottom border-1"></span>
<span class="border-bottom border-2"></span>
<span class="border-bottom border-3"></span>
<span class="border-bottom border-4"></span>
<span class="border-bottom border-5"></span>

Is there something I can write in my custom .scss file to extend the utilities.scss file (node_modules/bootstrap/scss/mixins/_utilities.scss) to allow border bottoms to have different border sizes?

I tried


$utilities: map-merge(
  $utilities,
  (
    "border-width": (
      property: border-width,
      class: border,
      values: $border-widths
    )
  )
);

and


    $utilities: map-merge($utilities,
    ("border-width": map-merge(map-get($utilities, "border-width"),
        (values: (
      1: 1px,
      2: 2px,
      3: 3px,
      4: 4px,
      5: 5px,
      ),
      ),
    )));

But no gravy when used in conjunction with border-bottom.

But even if I were successful at finding a solution...the following Bootstrap rule out of the utilities.scss file, has an important statement applied to its rule...

enter image description here

Is there any way to win this?

The only thing I can think of is if we setup a switch case ( SASS map) or multiple if else statement process to change the value of --bs-border-width, depending on the name of the class...? I have no clue.

Solution

  • border-bottom border-5 works just fine on my end. I suggest you have something in your CSS that overrides these class names / applies a different border width to the elements you are trying to style.

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container mt-2">
  <h2 class="border-bottom border-1 border-secondary p-2">Border bottom 1</h2>
  <h2 class="border-bottom border-2 border-danger p-2">Border bottom 2</h2>
  <h2 class="border-bottom border-3 border-success p-2">Border bottom 3</h2>
  <h2 class="border-bottom border-4 border-primary p-2">Border bottom 4</h2>
  <h2 class="border-bottom border-5 border-warning p-2">Border bottom 5</h2>
</div>