PALETTE

#3BA5CA
#36ABA2
#EFD23E
#EF5B3E
#939BA5
#313D4C

NAVBARS

JUMBOTRON

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

BREADCRUMBS & PAGINATION

  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data

CARDS (with card-columns in Bootstrap 4)

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago
Card image

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

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

Someone famous in Source Title
Card image cap

Card title

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

Button
Card image

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

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

Someone famous in Source Title

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

Someone famous in Source Title

TYPOGRAPHY

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Default Primary Success Info Warning Danger Default Primary Success Info Warning Danger

You can use the mark tag to highlight text.

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

This line rendered as bold text.

This line rendered as italicized text.

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

Someone famous in Source Title

Display 1

Display 2

Display 3

Display 4

BUTTONS

Action Another action Something else here
Separated link

Action Another action Something else here
Separated link

Dropdown link Dropdown link

ALERTS

TABS & PILLS

FORMS AND INPUTS

Validation:

LIST GROUPS

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

MODAL

Modal title

One fine body…

IMAGES

alt-text alt-text alt-text

CAROUSEL

TABLES

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

PROGRESS

25% 50% 75% 100%
25% 50% 75% 100%
10% 25% 50% 75% 100%