loading...

Bootstrap 4 – Borders

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%

Comments are closed.

loading...