Typography

Headings - Effra

h1 Heading 90PX / 90PX

h2 Heading 80PX / 80PX

h3 Heading 70PX / 70PX

h4 Heading 60PX / 60PX

h5 Heading 45PX / 45PX

h6 Heading 35PX / 35PX

Display Headings - Effra

Display 1 120px / 120px

Display 2 115px / 115px

Display 3 110px / 110px

Display 4 105px / 105px

Display 5 100px / 100px

Display 6 95px / 95px

Customizing Headings

Bold Heading With Muted Subheading

Bold Heading With Small Subheading

Primary Heading With Logo Font - Gochi Hand

Paragraph Styles - Open Sans

Standard Font - Open Sans SemiBold - 22px/36px Suspendisse molestie elit dignissim mattis condimentum. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis. Aenean at aliquet diam. Suspendisse congue pharetra lectus, in congue ligula malesuada in. Duis auctor bibendum porttitor. Curabitur malesuada condimentum ultricies. Curabitur sit amet lorem elit. Donec imperdiet posuere diam, nec volutpat eros semper in. Nam blandit eu nibh eu ultrices. Nam viverra dignissim nunc ut luctus.

Lead - Open Sans SemiBold 26px/36px Fusce accumsan congue justo, quis posuere sem suscipit vestibulum. Maecenas felis arcu, condimentum at porta in, maximus sit amet sem. Proin nec ligula eros. Curabitur ac tincidunt quam. Quisque aliquet libero lorem, at pulvinar quam porttitor id. In felis felis, fringilla et gravida quis, eleifend eu leo. Integer tincidunt dui sed tristique finibus.

Inline Text Elements

You can use the mark tag to highlight text.

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

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

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

This line of text will render as underlined.

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

This line rendered as bold text.

This line rendered as italicized text.

List Styles

Regular List

Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel

Unstyled List

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

Inline List

Lorem ipsum
Phasellus iaculis
Nulla volutpat

Descriptive List

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.

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 sed cursus feugiat, nunc augue blandit nunc.

Colors

Theme Colors

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

Custom Spacing (padding/margin)

.p-1 (.25rem) mb-1 (.25rem)

.p-2 (.5rem) mb-2 (.5rem)

.p-3 (1rem) mb-3 (1rem)

.p-4 (1.5rem) mb-4 (1.5rem)

.p-5 (2rem) mb-5 (2rem)

.p-6 (2.5rem) mb-6 (2.5rem)

.p-7 (3rem) mb-7 (3rem)

Rounded Levels

rounded-1

rounded-2

rounded-3

Shadows

.shadow

.shadow-sm

.shadow-lg

Shadow Directions

.shadow .top-left

.shadow .top

.shadow .top-right

.shadow .left

.shadow .center

.shadow .right

.shadow .bottom-left

.shadow .bottom

.shadow .bottom-right

Images

Responsive Image

Thumbnail

Caption

Tables

Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Striped

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Hoverable Rows

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Striped Rows Hoverable

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Bordered

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Borderless

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Color Variants

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

Table Small

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Table Responsive

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Components

Accordion

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Flush

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Alerts

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Additional Alert Content

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Alert Link Color

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

Dismissing Alert

Holy guacamole! You should check in on some of those fields below.

Badges

Example heading New

Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark

Buttons

Solid Buttons

Outline Buttons

Sizing

Disabled

Primary link Link

Block

Responsive Block

Cards

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card with .bg-bbm

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card Header

Card title

Card subtitle

This is every card element position. Some quick example text to build on the card title and make up the bulk of the card's content.

Card footer

This is some text within a card body.

Card List

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card Image Overlay

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card Image Overlay .bg-bbm

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title .bg-bbm

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Carousel

First slide label

Carousel with controls, indicators, label and caption

Second slide label

Carousel with controls, indicators, label and caption

Third slide label

Carousel with controls, indicators, label and caption

.bg-bbm First slide label

Dark Mode Carousel, fade transition, with controls, indicators, label and caption

Second slide label

Dark Mode Carousel, fade transition, with controls, indicators, label and caption

Third slide label

Dark Mode Carousel, fade transition, with controls, indicators, label and caption

Collapse

Link with href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Multiple Targets

Toggle first element

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Modals

Contrast Testing

Regular Heading

Primary Heading

Secondary Heading

Light Heading - fail

Dark Heading

White Heading - fail

Lead paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

Regular paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

FAIL Primary paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

Primary Lead paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

Secondary paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

FAIL Light paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

Dark paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

FAIL White paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

Primary Button Secondary Button Dark Button Light Button Success Button Danger Button Warning Button Info Button
FAIL Primary Button Secondary Button Dark Button FAIL Light Button FAIL Success Button Danger Button FAIL Warning Button FAIL Info Button
.BTN .BTN-BBM .BTN-PRIMARY .BTN .BTN-BBM .BTN-SECONDARY .BTN .BTN-BBM .BTN-OUTLINE-PRIMARY .BTN .BTN-BBM .BTN-PRIMARY .BG-GRADIENT .BTN .BTN-BBM .BTN-PRIMARY .BG-PRIMARY-GRADIENT

.bg-primary Heading

FAIL Primary Heading

Secondary Heading

Light Heading

Dark Heading

White Heading

Lead paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

Regular paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

FAIL Primary paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

Secondary paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

FAIL Light paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

Light lead paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

Dark paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

FAIL White paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

White Lead paragraph. Phasellus mollis tortor non leo aliquam pulvinar. Nam eget metus velit. Curabitur dapibus condimentum augue, at tempus nisi lobortis lobortis.

Primary Button Secondary Button Dark Button Light Button Success Button Danger Button Warning Button Info Button
Primary Button Secondary Button Dark Button FAIL Light Button Light Button LG FAIL Success Button FAIL Danger Button FAIL Warning Button FAIL Info Button
.BTN .BTN-BBM .BTN-PRIMARY .BTN .BTN-BBM .BTN-SECONDARY .BTN .BTN-BBM .BTN-OUTLINE-PRIMARY .TEXT-WHITE .BTN .BTN-BBM .BTN-PRIMARY .BG-GRADIENT .BTN .BTN-BBM .BTN-PRIMARY .BG-PRIMARY-GRADIENT

.bg-light Regular Heading

Primary Heading

Secondary Heading

FAIL Light Heading

Dark Heading

FAIL White Heading