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
Semibold 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 badge Left positioned heading label
Right inline badge
Right badge Bug Right inline heading badge
Right floating badge
Right floating badge Fixed Right floating heading badge
Left heading pill badge
48 Left pill badge Left positioned heading badge
Right inline pill badge
Right pill badge 93 Right inline heading pill badge
Right floating pill badge
Right floating pill badge 37 Right floating heading pill 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-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
List vertical sizing
List item vertical sizing options
Default list size

Default list doesn't have item spacing

  • 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
Custom list spacing

Add some spacing 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 style 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.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere tortor
Blockquote styling
Borders, icons and images
Left border

Display optional left border


Paid a cobra along or the sloth dear much eagle gosh from disagreeably lethargic before.

Someone famous in Source Title
Left aligned image

Blockquote with optional left image


Dear far dove lynx inaudibly between after under after on some far warthog.

Someone famous in Source Title
Left aligned icon

Add optional left icon using flex utilities


Paid a cobra along or the sloth dear much eagle gosh from disagreeably lethargic before.

Someone famous in Source Title

Well hey as seagull more and staunchly uniquely much less alas delicate much checked.

Someone famous in Source Title
Right border

Display optional right border


Or a more far thought close mammoth that so one bee more fidgeted checked and written.

Someone famous in Source Title
Right aligned image

Blockquote with optional right image


Well hey as seagull more and staunchly uniquely much less alas delicate much checked.

Someone famous in Source Title
Right aligned image

Add optional right icon using flex utilities


Or a more far thought close mammoth that so one bee more fidgeted checked and written.

Someone famous in Source Title

Well hey as seagull more and staunchly uniquely much less alas delicate much checked.

Someone famous in Source Title