Typography in Bootstrap, concepts and usage

In this Bootstrap lesson, Taimienphi.vn will introduce you to Typography, type and text format in Bootstrap.

Learn Typography in Bootstrap

1. Working with Heading

We can specify all HTML heading tags from h1 come h6 similar to how to identify these tags in simple HTML documents. In case if you want to apply the style of the element the same as the heading style, we can use heading classes .h1 come .h6 on different elements.

For example: in the example below we use HTML heading tags from h1 to h6:

The result will look like this:

1.1. Customizable Heading

Also we can use tags small with class .text-muted to display the secondary text of any heading in smaller variations.

For example: In this example we use the small tag with the class .text-muted to display the secondary text of the heading:

The result will look like this:

1.2. Display heading

In Bootstrap 4 adds display headings, which are used to highlight a heading.

For example: In the example below 4 titles are displayed in different ways:

The result will look like this:

2. Working with the text in Bootstrap

The default font size in Bootstrap is 1rem (equivalent to 16px), the height between lines is 1.5. These parameters are applied to the tag body and all the text.

In addition, the bottom margin equal to 1/2 the height between lines (default is 10px) is applied to all paragraphs, ie elements. p.

To highlight the paragraph, we add layers .lead go there.

For example: In the example below we add a .lead class to highlight the text:

The result will look like this:

Tips: In CSS, rem stands for “root me“. 1rem is equivalent to the font size of the root element (ie html element) of 16px in most browsers by default.

To align the text to the left, right and center in a paragraph, we use text alignment classes.

For example: In the example below we use alignment layers to align text to the left, right and center:

The result will look like this:

Also we can align text based on device screen size using responsive text alignment layers. These classes use breakpoints as a grid system.

Refer to the example below, in this example we use responsive text alignment classes:

The result will look like this:

3. Format text

We can use text formatting tags like strong, i, small tags to format bold text, italics, etc. the same way we do in plain HTML text.

For example: In the example below we use the text formatting tags to format the text:

The result will look like this:

3.1. Text converter

Also we can convert text to lowercase, uppercase or uppercase.

Refer to the example below:

The result will look like this:

3.2. Text color

Bootstrap includes many utilities to display different text colors, such as error messages or successful installation messages, etc.

For example: In this example we use different colors for different texts:

The result will look like this:

4. Format cited

To format citations, we only need to identify the citations using the element blockquote and Bootstrap will do the rest.

Also, to identify the source, we can add the element footer with class .blockquote-footer and wrap the source name in cite, as in the example below:

The result will look like this:

To align the citations to the right or center, we use text alignment classes .text-right or .text-center in the element blockquote.

https://thuthuat.taimienphi.vn/typography-in-bootstrap-50890n.aspx
The above lesson Taimienphi.vn has just introduced you to Typography in Bootstrap. In the next Bootstrap lesson, Taimienphi.vn will introduce you more on how Create table in Bootstrap.