Bootstrap’s font sizes are calculated off of the body font size by using rem values. If you change the body font size all styles will be increased/decreased automatically. Rem stands for “root em” because it calculates the size based on the size of the root of the document or body tag.
Text Utilities classes, contains various text properties, such as, text alignment, text wrapping, text overflow, text transformation, font weight, italics, monospace, resetting color of text, removing text decorations.
Bootstrap utility display changes the value of the property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.
Screen Size
Class
Hidden an element
.d-none
Hides an element on a specific screen size
.d-*-none
Hidden only on xs
.d-none .d-sm-block
Hidden only on sm
.d-sm-none .d-md-block
Hidden only on md
.d-md-none .d-lg-block
Hidden only on lg
.d-lg-none .d-xl-block
An element inline
.d-inline
An element inline on a specific screen size
.d-*-inline
An element inline-block
.d-inline-block
An element inline-block on a specific screen size
.d-*-inline-block
An Element display as a table
.d-table
An element display as a table on a specific screen size
.d-*-table
An element display as a table cell
.d-table-cell
An element display as a table cell on a specific screen size
.d-*-table-cell
An element display as a table row
.d-table-row
An element display as a table row on a specific screen size
.d-*-table-row
Creates a flexbox container and transforms direct children into flex items
.d-flex
Creates a flexbox container on a specific screen size
.d-*-flex
Creates an inline flexbox container
.d-inline-flex
Creates an inline flexbox container on a specific screen size