You can use the vertical alignment utility classes to quickly change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Class	Description	Test
.align-baseline	Align the baseline of the element with the baseline of its parent.	Example
.align-top	Align the top of the element with the top of the entire line.	Example
.align-middle	Align the element in the middle of the parent element.	Example
.align-bottom	Align the bottom of the element with the bottom of the entire line.	Example
.align-text-top	Align the top of the element with the top of the parent element’s font.	Example
.align-text-bottom	Align the bottom of the element with the bottom of the parent element’s font.	Example

---

Position Classes

You can use the position utility classes to quickly configuring the position of an element.

Class	Description	Test
.position-static	Set the position of element to static.	Example
.position-relative	Set the position of element to relative.	Example
.position-absolute	Set the position of element to absolute.	Example
.position-fixed	Set the position of element to fixed.	Example
.position-sticky	Set the position of element to sticky.	Example
.fixed-top	Position an element at the top of the viewport, from edge to edge.	Example
.fixed-bottom	Position an element at the bottom of the viewport, from edge to edge.	Example
.sticky-top	Position an element at the top of the viewport, from edge to edge, but that will only happen after you scroll past it.	Example

---

Display Classes

You can use the display utility classes to quickly and responsively toggle the display value of an element. You can also control an element’s display when printing the page.

Class	Description	Test
.d-none	Hide an element. It does not take up any space in the layout.	Example
.d-inline	Force an element to generate an inline-level box.	Example
.d-inline-block	Force an element to generate a block box that will be flowed with surrounding content i.e. in the same line as adjacent content like inline box.	Example
.d-block	Force an element to generate a block-level box.	Example
.d-table	Force an element to behave like a <table> element.	Example
.d-table-row	Force an element to behave like a <tr> element.	Example
.d-table-cell	Force an element to behave like a <td> element.	Example
.d-flex	Force an element to generate a block-level flex container box.	Example
.d-inline-flex	Force an element to generate an inline-level flex container box.	Example

You can also use the responsive breakpoints (sm, md, lg, xl, and xxl.) with these display utility classes to show or hide elements depending on viewport width using the format .d-{breakpoint}-{value}, for example, .d-sm-none, .d-md-block, .d-lg-block, .d-xl-block, .d-xxl-block, and so on.

Tip: You can create print variant of the display classes to change the display value of elements when printing by simply inserting the string print- after .d-, for example, .d-print-none, .d-print-inline, .d-print-block, .d-print-table, and so on.

Miscellaneous Classes

Here’s the list some more utility classes that can used for various purposes.

Class	Description	Test
.btn-close	Create generic close icon for dismissing components like modals and alerts.	Example
.overflow-auto	Provide scrollbars to view overflowed content of an element if required.	Example
.overflow-hidden	Hide overflowed content of an element.	Example
.overflow-visible	Show overflowed content of an element.	Example
.overflow-scroll	Provide scrollbars to view overflowed content of an element.	Example
.stretched-link	Make an element clickable by stretching a nested link.	Example
.visible	Make an element visible, without modifying the display.	Example
.invisible	Make an element invisible, but it still take up space in the page.	Example
.visually-hidden	Hide an element to all devices except screen readers.	Example