Elements:Typography

Typography including headings, paragraphs, lists, quotes and more.

Headings

Headings are applied either with h tags or with .h* classes ( .h1 to .h6 ) allow any element to "display" like an heading.

h tags

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Paragraphs using .h* classes

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Display headings

.display-1|2|3|4 classes allows for enlarged & bolder headings for use as page titles for example.

Display 1

Display 2

Display 3

Display 4

Secondary heading text

To include secondary heading text you can include text wrapped in small tags. Use the .d-block class to make in show on the next line.

Fancy display heading With faded secondary text

Fancy display heading With faded secondary text

Lead Text

Add the .lead class to any p badge to enlarge the text and line height.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Inline text elements

Various text element/badge helpers.

mark : You can use the mark badge to highlight text.

del : This line of text is meant to be treated as deleted text.

s : This line of text is meant to be treated as no longer accurate.

ins : This line of text is meant to be treated as an addition to the document.

u : This line of text will render as underlined

small : This line of text is meant to be treated as fine print.

strong : This line rendered as bold text.

em : This line rendered as italicized text.