Using the grid system, we learned how to lay out a website’s basic building blocks. However, generally we need an additional level of control that allows us to more finely align the content contained within these building blocks. This level of control is provided by Bootstrap’s text alignment classes:
- text-justify justifies the text so that it fills an entire area evenly
- text-nowrap ensures that the text does not wrap onto the next line (refer to Figure 8.6)
- text-truncate will truncate longer text with an ellipsis (refer to Figure 8.6):
Figure 8.6: Applying the text-nowrap and text-truncate classes to long bodies of text; the text in the first paragraph has the text-nowrap class applied, and therefore does not wrap onto the next line, but continues on the same line instead
The text-<position> and text-<breakpoint>-<position> classes can be used to position text by setting the text-align property for an element. Bootstrap defines the nonresponse text-left, text-right, and text-center classes as follows:
.text-left {
text-align: left [important;
} .text-right {
text-align: right [important;
}
.text-center {
text-align: center !important;
}
Similarly, the responsive equivalents are as follows:
- text-*-left: This aligns the text in the element to which this class is applied to the left on viewports of size * or wider, where * can be one of sm, md, lg, or xl
- text-*-right: This aligns the text in the element to which this class is applied to the right on viewports of size * or wider, where * can be one of sm, md, lg, or xl
- text-*-center: This aligns the text in the element to which this class is applied to the center on viewports of size * or wider, where * can be one of sm, md, lg, or xl
Text can be converted to lowercase or uppercase using the text-lowercase and text- uppercase classes. The text-capitalize class capitalizes the first letter of each word. The classes are merely wrappers for the text-transform property:
.text-lowercase {
text-transform: lowercase !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
Just as with the aforementioned text-transform wrappers, the font-weight-* classes wrap the font-weight property, whereby the * refers to one of the possible values for the font- weight property: normal or bold.
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.