Typography in Bootstrap, concepts and usage


In the previous Bootstrap lesson Taimienphi.vn showed you how to create a Responsive interface for the website with Bootstrap, the next lesson below Taimienphi.vn will introduce you more about Typography in Bootstrap.


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:

typography in bootstrap

The result will look like this:

typography in bootstrap 2

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:

typography in bootstrap 3

The result will look like this:

typography in bootstrap 4

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:

typography in bootstrap 5

The result will look like this:

typography in bootstrap 6

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:

typography in bootstrap 7

The result will look like this:

typography in bootstrap 8

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:

typography in bootstrap 9

The result will look like this:

typography in bootstrap 10

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:

typography in bootstrap 11

The result will look like this:

typography in bootstrap 12

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:

typography in bootstrap 13

The result will look like this:

typography in bootstrap 14

3.1. Text converter

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

Refer to the example below:

typography in bootstrap 15

The result will look like this:

typography in bootstrap 16

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:

typography in bootstrap 17

The result will look like this:

typography in bootstrap 18

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:

typography in bootstrap 19

The result will look like this:

typography in bootstrap 20

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.

.

Add a Comment

Your email address will not be published. Required fields are marked *