Skip to content

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.


Abbreviations

Use the abbr badge to hide text which is shown when any element is hovered.

attr

HTML


Blockquotes

Add the class .blockquote to blockquote elements to implment the default simnple styling, you can also use the .blockquote-footer class for citing the quote source.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Default Align Right

Add the class .text-right to flip the quote to align right.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Bubble Style

Add the class .blockquote-bubble to the blockquote element and the class .blockquote-bubble-content to any inner element to make the quote display like a speach bubble.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Jimi Bloggs Someone famous in Source Title

Bubble Style Align Right

Add the class .text-right to flip the quote to align right.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title Jimi Bloggs

Lists

Default Unordered Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Default Ordered Lists

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled Lists

Add the class .list-unstyled to ul elements to remove all default styling from the list.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Inline Lists

Add the class .list-inline to the ul element and .list-inline-item to each list item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Bordered Lists

Add the class .list-bordered to add a bottom border to each list item.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Large Lists

Add the class .list-lg to enlarge the font size and padding on list items.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Small Lists

Add the class .list-sm to decrease the font size and padding on list items.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Icons Lists

Add the class .list-item-icon to each icon in the list.
You can use all icons listed on the icons page.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Extras

Text alignment

.text-justify

Align justify text: Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.


.text-BREAKPOINT-ALIGN Class

Adjust text alignment based on screenwidth using the format: .text-BREAKPOINT-ALIGN ie. .text-sm|md|lg|xl-left|center|right

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Center aligned text on viewports sized SM (small) or wider.

Center aligned text on viewports sized MD (medium) or wider.

Center aligned text on viewports sized LG (large) or wider.

Center aligned text on viewports sized XL (extra-large) or wider.


Text case, weight & italics

Easily alter text case, weight & italics using these helper classes.

.text-lowercase : Lowercased text.

.text-uppercase : Uppercased text.

.text-capitalize : CapiTaliZed text.

.font-weight-bold : Bold text.

.font-weight-normal : Normal weight text.

.font-italic : Italic text.

.text-fancy : Normal text with something a bit text-fancy can be nice!.

.text-shadow : Text with shadow.


Responsive Text Size

Screen default
.text-x1
.text-x2
.text-x3
.text-x4
.text-x5
.text-x6
.text-x7
.text-x8
.text-x9
.text-x10
Screen sm
.text-sm-x1
.text-sm-x2
.text-sm-x3
.text-sm-x4
.text-sm-x5
.text-sm-x6
.text-sm-x7
.text-sm-x8
.text-sm-x9
.text-sm-x10
Screen md
.text-md-x1
.text-md-x2
.text-md-x3
.text-md-x4
.text-md-x5
.text-md-x6
.text-md-x7
.text-md-x8
.text-md-x9
.text-md-x10
Screen lg
.text-lg-x1
.text-lg-x2
.text-lg-x3
.text-lg-x4
.text-lg-x5
.text-lg-x6
.text-lg-x7
.text-lg-x8
.text-lg-x9
.text-lg-x10
Screen xl
.text-xl-x1
.text-xl-x2
.text-xl-x3
.text-xl-x4
.text-xl-x5
.text-xl-x6
.text-xl-x7
.text-xl-x8
.text-xl-x9
.text-xl-x10
Example:

Resize the page to see me change

<h2 class="text-sm-x2 text-lg-x8">Resize the page to see me change</h2>

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page