bootstrap typography

Font Size & Line Height

Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> element and all paragraphs (<p>). In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).

Headings

Bootstrap will style the HTML headings in the following way. <small> element is used to create a lighter, secondary text in any heading

Heading 1 (36px) SMALL TEXT

Heading 2 (30px) SMALL TEXT

Heading 3 (24px) SMALL TEXT

Heading 4 (48px) SMALL TEXT

Heading 5 (54px) SMALL TEXT
Heading 6 (12px) SMALL TEXT

Contextual Colors and Backgrounds

Bootstrap also has some contextual classes that can be used to provide meaning through colors. The classes for text colors are: text-muted, text-primary, text-success, text-info, text-warning, and text-danger.

The classes for background colors are:

bg-primary
bg-success
bg-info
bg-warning
bg-danger

More Typography Classes

text-left indicates left-aligned text

text-center - indicates center-aligned text

text-right - indicates right-aligned text

text-justify - indicates justified text

text-lowercase - indicates lowercased text

text-uppercase - indicates uppercased text

text-capitalize - indicates capitalized text

list-unstyled - removes the default list-style and left margin on list items

list-inline - places all list items on a single line

pre-scrollable - makes a <pre> element scrollable


0 Like 0 Dislike 0 Comment Share

Leave a comment