Typography is a feature of Bootstrap for styling and formatting the text content like headings, paragraphs, blockquotes, etc. Now learn each one of these typography classes in the following.
You can define all HTML headings, <h1> to <h6> in the same way you define in simple HTML document.
By using .h1 to h6 bootstrap classes, you can match the font styling of a heading without using the associated HTML element.
You can create a sub-heading or secondary text by placing text inside a <small> element within the heading or add .small class.
Display headings are designed to create better headings i.e. larger font-size and lighter font-weight. There are four classes exists in display headings which are .display-1, .display-2, .display-3, and .display-4.
By using .lead class, you can make a paragraph stand out such as larger font size, lighter weight, and taller line-height.
The HTML <mark> element represents text as marked or highlighted for reference purposes.
The HTML <abbr> represents an abbreviation or acronym. The title attribute can be used to provide an expansion of the abbreviation. In Bootstrap, <abbr> element with a light dotted bottom border and a help cursor on hover.
To apply Bootstrap’s styles to the <blockquote> element, use the .blockquote class. The .blockquote-footer class is used to add the footer details for identifying the source of the quote.
The bootstrap supports ordered lists, unordered lists, and definition lists. It applies various styles and has several classes specifically for lists.
Lists — Unstyled
By using .list-unstyled class, you can render lists without their default list-style and left-margin.
Lists — Inline
By using .list-inline and .list-inline-item classes, you can render lists as display: inline-block.
Horizontal Definition List
By using .dl-horizontal class, you can make the definition list horizontally.
In Bootstrap, the <code> element is worked as follows:
In Bootstrap, the <kbd> element is worked like this:
In Bootstrap, the <var> element is worked like this:
Other Typography Classes:
|.text-left||This class is used to set the left alignment of text.|
|.text-right||This class is used to set the right alignment of text.|
|.text-center||This class is used to set the center alignment of text.|
|.font-weight-bold||This class is used to sets the font weight to bold. It is used to display the importance of text.|
|.font-weight-bolder||This class is used to sets the font weight to deep bold. It is used to display the importance of text.|
|.font-italic||This class is used to sets the font style italic.|
|.text-uppercase||This class is used to transform text into uppercase.|
|.text-lowercase||This class is used to transform text into lowercase.|
|.text-capitalize||This class is used to transform text to capitalize first letter of each word.|
|.text-nowrap||This class Indicates no wrap text.|
|.text-reset||By using this class resets the color of a text or a link.|
|.text-justify||Indicates justified text.|
|.text-decoration-none||Removes the underline from a link.|
|.font-weight-light||Light weight text.|
|.font-weight-lighter||Lighter weight text.|
|.initialism||Displays the text inside an element in a slightly smaller font size.|
|.pre-scrollable||This class makes a <pre> element scrollable|