Style

Headings

All HTML headings, <h1> through <h6>, are available. These are used for page and section headings.

h1. tag heading h1 2.1rem

h2. tag heading h2 1.8rem

h3. tag heading h3 1.6rem

h4. tag heading h4 1.4rem

h5. tag heading h5 1.2rem
h6. tag heading h6 1.0rem

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element. These are used for paragraphs of text that should appear larger, or to change the size of a semantic header.

h1. class heading .h1 2.1rem

h2. class heading .h2 1.8rem

h3. class heading .h3 1.6rem

h4. class heading .h4 1.4rem

h5. class heading .h5 1.2rem

h6. class heading .h6 1.0rem

We can also apply the strong to make them bolder

h1. strong heading

h2. strong heading

h3. strong heading

h4. strong heading

h5. strong heading

h6. strong heading


Customising headings

Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.

Fancy display heading With faded secondary text


Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1 .display-1 6rem

Display 2 .display-2 5.5rem

Display 3 .display-3 4.5rem

Display 4 .display-4 3.5rem


Intro

Make a paragraph stand out by adding .intro.

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

Make a paragraph stand out by adding .intro .text-red.

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


Lead

Make a paragraph stand out by adding .lead.

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


Inline text elements

Styling for common inline HTML5 elements.

highlight You can use the mark tag to highlight text. mark

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

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

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

This line of text will render as underlined u

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

This line rendered as bold text. strong

This line rendered as italicized text. em


Paragraph

What happens to normal paragraph.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare gravida justo, quis efficitur libero posuere sit amet. Sed maximus sed felis vitae vulputate. Mauris sed dictum urna. Nunc non nulla nec lacus consequat dictum sed ut tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse tincidunt felis ac libero porta pharetra. Curabitur molestie eros vel arcu volutpat, a tempus felis pellentesque. Vestibulum a ligula in turpis dapibus consectetur.

Showing line breaks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare gravida justo, quis efficitur libero posuere sit amet.
Sed maximus sed felis vitae vulputate. Mauris sed dictum urna.
Nunc non nulla nec lacus consequat dictum sed ut tortor.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Suspendisse tincidunt felis ac libero porta pharetra. Curabitur molestie eros vel arcu volutpat, a tempus felis pellentesque.
Vestibulum a ligula in turpis dapibus consectetur.


Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

Add a <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>.

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

Someone famous in Source Title

Lists

Ordered

  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

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • 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

Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Buttons

 

Form

[gravityform id=”2″ title=”true” description=”true”]


Colours

Text Colours

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Link Colours

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Muted link

White link

Background Colours

.bg-red
.bg-dark-red
.bg-light
.bg-dark
.bg-white
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-transparent