Bootstrap Typography
Typography is a feature of Bootstrap4 for changing the styling and formatting the text content. The bootstrap4 default font size of 1rem (16px) and the line height is 1.5.
Typography will be used to create:
- Headings
- Subheadings
- content and Paragraph font color, font type and alignment
- Lists
- Other inline elements
<h1> – <h6>
Bootstrap 4 styles HTML headings (h1 to h6) is a bold font-weight and an increased font-size.
Example:
<h1>h1. heading1</h1> <h2>h2. heading2</h2> <h3>h3. heading3</h3> <h4>h4. heading4</h4> <h5>h5. heading5</h5> <h6>h6. heading6</h6>
OUTPUT
Tags and class to implement typography feature in Bootstrap 4:
- Display headings: Display headings are used to stand out more than normal headings h1 to h6 (larger font-size and lighter font-weight), there are 4 types of classes : .display-1, .display-2, .display-3, .display-4.
- mark: Highlight the text content.
- blockquote: Quote the text content.
- text-center: Align the text to the center.
- text-uppercase: Transform text into uppercase.
- text-lowercase: Transform text into lowercase.
- font-italic: Font style to italic.
- small: Create secondary subheadings.
- text-left: Left alignment of text.