The border helper classes allow, as their name implies, setting an element’s border properties. Specifically, utility classes allow for the quick setting of border, border-top, border-bottom, border-left, border-right, and border-color. Border helper classes also allow rounding borders through setting the border-radius properties.
First and foremost, to create a solid 1 px border around an element, use the border class. Similarly, to remove the border around an element, use the border-0 class. To clear the top, bottom, left, or right borders, use the border-top-0, border-bottom-0, border-left-0, and border-right-0 classes respectively. Bootstrap defines these classes as follows:
.border {
border: 1px solid #dee2e6 !important;
} .border-0 {
border: 0 !important;
}
.border-top-0 {
border-top: 0 !important;
}
.border-right-0 {
border-right: 0 !important;
}
.border-bottom-0 {
border-bottom: 0 !important;
} .border-left-0 {
border-left: 0 [important;
}
To round the border around an element, use the rounded class. To only round specific sides, use the following (refer to Figure 8.2):
- rounded-top
- rounded-bottom
- rounded-left
- rounded-right
Note that the rounded-* classes must be used in conjunction with the border-* classes:
Figure 8.2: Using the border and rounded-* utility class to force borders and the rounding of borders
The border-color property of an element can be set to one of the nine context colors on offer by Bootstrap 4 using the border-<context color> helper classes, whereby <context- color> refers to primary (#007bff), secondary (#868e96), success (#28a745), info (#17a2b8), warning (#ffc107), danger (#dc3545), light (#f8f9fa), dark (#343a40), or white (#fff).
Figure 8.3: Using the border, rounded, and border context color utility classes to create colored, rounded borders for elements
Last but not least, we can render a circular element using the rounded-circle class, or we can reset the border-radius using the rounded-0 class. The two classes are defined as follows:
.rounded-circle {
border-radius: 50% [important;
}
.rounded-0 {
border-radius: 0 [important;
}
Figure 8.4: Using the rounded-circle class to create a circular element by setting the border-radius to 50%
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.