Display helpers and alignment helpers form an important aspect of Bootstrap’s utility classes. The latter are classes that allow you to quickly set the display property of an element, while alignment utilities can be used to change the vertical alignment of elements whose display property is set to either inline or inline-block. Let’s look at each type of helper class individually.
1. Display helpers
Display helper classes allow you to quickly set the display property of an element, and in the previous chapters we have already come across some of these helper classes (for example, d-none). The classes are prefixed with the letter d, followed by a dash and the name of the property value to which you wish to set the element’s display:
- d-none is akin to writing display: none; and hides the given element
- d-block is akin to writing display: block; and will force the element to which it is applied to span the full width of the available space
- d-inline is akin to writing display: inline; and will force the element to which it is applied to only take up the minimum amount of required space
- d-inline-block is akin to writing display: inline-block; and will force the element to which it is applied to only take up the minimum or determined amount of space (that is, inline-block elements are inline elements that can have a width and height)
- d-table is akin to writing display: table; and forces the element to behave like a table element
- d-table-cell is akin to writing display: table-cell and, as its name implies, forces the element to behave like a table cell
- d-flex is akin to writing display: flex and enables the flex context for the element and its children
- d-inline-flex is akin to writing display:inline-flex and enables the flex context for the element and its children, but forces the flex element to which it is applied to display inline
For each of the preceding utilities classes, Bootstrap offers a responsive equivalent taking the form of d-*-*. For example, to hide an element only on small viewports, one would use the d-sm-none class. Similarly, to set the display property to block only on large viewports, one would use d-lg-block. This allows for very fine-grained visibility control, as using the d-none and d-xl-inline classes together will display a given element inline only on very large viewports.
2. Alignment helpers
The alignment utilities can be used to change the vertical alignment of elements whose display property is set to either inline or inline-block. To this end, Bootstrap provides the following classes:
- align-bottom, which is akin to writing vertical-align: bottom;
- align-top, which is akin to writing vertical-align: top;
- align-baseline, which is akin to writing vertical-align: baseline
- align-text-top, which is akin to writing vertical-align: text-top
- align-text-bottom, which is akin to writing vertical-align: text- bottom
- align-middle, which is akin to writing vertical-align: middle
Note that, when specifying these rules, Bootstrap applies the !important operator, which means that the rules will take precedence.
For example, consider the following snippet:
<div>
<div class=”d-inline-block” style=”height: 2em;”>
</div>
Lorem Ipsum
<span class=”align-top”>align-top</span>
</div>
This will produce the result illustrated next:
Figure 8.1: Using the align-top utility class to force vertical alignment
Note the subtle difference between vertical-align: top and vertical-align: text-top. The former aligns the element with the highest element inside the container, while the latter will align the element with the top edge of the tallest text inside the container.
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.