Bootstrap includes some excellent border utility classes. It has five utility classes for border width, also known as border thickness. We can also customize the built-in
$border-width variable and the
In this tutorial we will demo these three methods of controlling element border width. Here’s what we will build:
How to Use Bootstrap Border Width Classes
Bootstrap border width classes only set the CSS
border-width property. They do not set any other styling values. That means a div with
border-width and some height and width will still not have a visible border.
Make sure to also set the
border-style property and the
border-color property. Here is example code that uses the
border Bootstrap border utility class to apply border style and color:
<div className="box border border-success border-1 text-center">border-1 class</div>
<div className="box border border-success border-2 text-center">border-2 class</div>
<div className="box border border-success border-3 text-center">border-3 class</div>
<div className="box border border-success border-4 text-center">border-4 class</div>
<div className="box border border-success border-5 text-center">border-5 class</div>
Additionally I have customized the border color with the
border-success utility class and created my own
box class to give the divs width and height.
Notice how there are five different
border-* classes. Each one by default corresponds to a greater border-width value: 1px, 2px, 3px, 4px, 5px.
Here’s how this looks in the DOM:
Notice how most of the styling is set through the
border class. What the
border-5 class does is it sets the
--bs-border-width value to 5px. This value is then consumed by the
border class when it sets border width.
How to Set Border Thickness with –bs-border-width Variable
Instead of using a border width utility like
border-3, we can directly update the
--bs-border-width variable. Here’s the code:
Make sure that this code comes after the
@import "bootstrap/scss/bootstrap"; snippet in your
What the code above is doing is overriding the
--bs-border-width value that comes from the Bootstrap
root styling file. We can see this in the DOM below.
This value will be consumed by the
border utility class as normal. We don’t need a border width class on our div:
<div className="box border border-success text-center">Custom --bs-border-width</div>
How to Set Border Thickness with $border-width Variable
A final way of setting custom border thickness in Bootstrap is to use a custom class and override the default
$border-width value. Here’s example code:
<div className="box custom-border border-success text-center">Custom $border-width</div>
We created a class called
custom-border and supplied it with the
$border-width variable for its border width property.
All three methods described are useful for controlling border thickness. My favorite is to override the
--bs-border-width root value so that multiple components can share this styling.