Buzz
In this Bootstrap lesson, Mytour will introduce you to Typography, styles, and text formatting in Bootstrap.
Exploring Typography in Bootstrap
1. Working with Headings
We can define all HTML heading tags from h1 to h6 similarly to how we define these tags in simple HTML documents. If we want to apply styles of heading elements to other elements, we can use heading classes like .h1 to .h6 on different elements.
Example: In the example below, we use HTML heading tags from h1 to h6:
The returned result looks like the following:
1.1. Customizing Headings
Additionally, we can utilize the small tag with the .text-muted class to display secondary text of any heading in a smaller variant.
Example: In this example, we use the small tag with the .text-muted class to display secondary text of the heading:
The returned result looks like the following:
1.2. Highlighted Heading
In Bootstrap 4, the display heading is introduced to emphasize a heading.
Example: In the example below, four headings are displayed in different styles:
The returned result appears as follows:
2. Dealing with Text Blocks in Bootstrap
The default font size in Bootstrap is 1rem (equivalent to 16px), with a line height of 1.5. These parameters apply to the body tag and all text blocks.
Additionally, a bottom margin equal to 1/2 of the line height (default is 10px) is applied to all text blocks, namely p elements.
To highlight a text block, we add the .lead class to it.
Example: In the example below, we add the .lead class to highlight the text block:
The returned result appears as follows:
Tip: In CSS, rem stands for 'root em'. 1rem equals the font size of the root element (i.e., the html element), which is 16px in most browsers by default.
To align text left, right, and center within a block, we use text alignment classes.
Example: In the example below, we use alignment classes to align text left, right, and center:
The returned result appears as follows:
Additionally, we can align text based on the device screen size by using responsive alignment classes. These classes utilize breakpoints as part of the grid system.
Refer to the example below, where we utilize responsive alignment classes:
The result returned appears as follows:
3. Text Formatting
We can utilize text formatting tags such as strong, i, small to format text in bold, italic, etc., similar to how we do it in simple HTML text.
Example: In the example below, we use text formatting tags to format the text:
The returned result has the following format:
3.1. Text Conversion
Additionally, we can convert text to lowercase, uppercase, or capitalize it.
Refer to the example below:
The returned result appears as follows:
3.2. Text Color
Bootstrap provides various utilities to display different text colors, such as error messages or success notifications, etc.
Example: In this example, we use different colors for different texts:
The result is returned as follows:
4. Formatting Blockquotes
To format blockquotes, we simply define the blockquote element, and Bootstrap takes care of the rest.
Additionally, to specify the source, we can add the footer element with the .blockquote-footer class and wrap the source name in cite, as shown in the example below:
The returned result appears as follows:
To align blockquotes to the right or center, we use text alignment classes .text-right or .text-center within the blockquote element.
In this lesson, Mytour just introduced you to Typography in Bootstrap. In the next Bootstrap lesson, Mytour will continue to introduce you to how to create tables in Bootstrap.
