Heading styles Default heading sizes and font weights
Thin headings

H1 Heading Thin 25px

H2 Heading Thin 23px

H3 Heading Thin 21px

H4 Heading Thin 19px

H5 Heading Thin 17px
H6 Heading Thin 15px
Semibold headings

H1 Heading Semibold 25px

H2 Heading Semibold 23px

H3 Heading Semibold 21px

H4 Heading Semibold 19px

H5 Heading Semibold 17px
H6 Heading Semibold 15px
Light headings

H1 Heading Light 25px

H2 Heading Light 23px

H3 Heading Light 21px

H4 Heading Light 19px

H5 Heading Light 17px
H6 Heading Light 15px
Bold headings

H1 Heading Bold 25px

H2 Heading Bold 23px

H3 Heading Bold 21px

H4 Heading Bold 19px

H5 Heading Bold 17px
H6 Heading Bold 15px
Regular headings

H1 Heading Regular 25px

H2 Heading Regular 23px

H3 Heading Regular 21px

H4 Heading Regular 19px

H5 Heading Regular 17px
H6 Heading Regular 15px
Black headings

H1 Heading Black 25px

H2 Heading Black 23px

H3 Heading Black 21px

H4 Heading Black 19px

H5 Heading Black 17px
H6 Heading Black 15px
Heading elements Optional icons, labels and badges
Left heading icon
Left icon Left positioned heading icon
Right inline icon
Right inline icon Right inline icon position
Right floating icon
Right floating icon Right floating icon
Left heading label
New Left label Left positioned heading label
Right inline label
Right inline label Bug Right inline heading label
Right floating label
Right floating label Fixed Right floating heading label
Left heading badge
48 Left badge Left positioned heading badge
Right inline badge
Right inline badge 93 Right inline heading badge
Right floating badge
Right floating badge 37 Right floating heading badge
List options Basic list examples with optional classes
Default unordered list

Default unordered list using .list class

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
Unstyled list

Unstyled list using .list-unstyled class

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
Square list type

Square list style using .list-square class

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
Default ordered list

Default ordered list using .list class

  1. Lorem ipsum dolor sit amet
  2. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
  3. Faucibus porta lacus fringilla vel
  4. Aenean sit amet erat nunc
Circle list type

Circle list style using .list-circle class

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
List with icons

List with icons using .list-icons class

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
List vertical sizing List item vertical sizing options
Condensed list

Condensed list using .list-condensed class

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
Default list size

Default size using .list class

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
Extended list

Extended list using .list-extended class

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
Inline lists Inline list display options
Default inline list

Inline list using .list-inline class

  • 1. First item
  • 2. Second item
  • 3. Third item
Condensed inline list

Using .list-inline-condensed class

  • 1. First item
  • 2. Second item
  • 3. Third item
Separated inline list

Using .list-inline-separate class

  • First item
  • Second item
  • Third item
Description lists Vertical and horizontal description lists
Vertical description list

Vertical list of terms with their associated descriptions.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Horizontal description list

Horizontal list of terms with their associated descriptions.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Blockquote options Basic blockquotes styling
Left blockquote

Default left blockquote with source


Paid a cobra along or the sloth dear much eagle gosh from disagreeably lethargic before.
Someone famous in Source Title
Left blockquote with image

Left blockquote with optional image


Dear far dove lynx inaudibly between after under after on some far warthog regardless wrote.
Someone famous in Source Title
Right blockquote

Optional right blockquote using .blockquote-reverse class.


Or a more far thought close mammoth that so doused one bee more fidgeted checked and written.
Someone famous in Source Title
Right blockquote with image

Right blockquote with optional image


Well hey as seagull more and staunchly uniquely much less alas delicate much checked far away.
Someone famous in Source Title
Well blocks Inset content block options
Large well block

Optional large well using .well-lg class

Look, I'm in a large well block!
Default well block

Basic example of well block

Look, I'm in a well block!
Small well block

Optional small well using .well-sm class

Look, I'm in a small well block!
White well block

White background using .well-white class

Look, I'm in a white well block!
Optional border

Add optional border to any or all sides

Look, I'm in a bordered well block!
Solid color wells

Change background color using .bg-* class

Look, I'm in a .bg-primary well block!