Standard Colors

Disabled State

Outline Styles

Rounded Pills

Icon Buttons

Nested Dropdowns

Sizes

Block Buttons

Loading State

Vertical Group

Tags Variations

Close Button

Standard Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Fancy Headingwith faded text

Lead text: Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

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

Bold text.

Italicized text.

Inline Styles

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.

An abbreviation of the word attribute is attr.

Alignment classes

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Emphasis classes

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

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

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

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

Unordered & Ordered

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nullacommodo luctus
  • Phasellus iaculis neque
  • Purus sodales ultricies

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

Unstyled & Inline

• 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

Inline List

• Home
• Library
• Data

Code Blocks

For example, <section> should be wrapped as inline.

<p>Sample text here...</p>

To switch directories, type cd followed by the name of the directory.

Description Lists

Description lists

A description list is perfect for defining terms.

Term

Definition for the term.

And some more placeholder definition text.

Another term

This definition is short, so no extra paragraphs or anything.

Truncated term is truncated

This can be useful when space is tight. Adds an ellipsis at the end.

Nesting

Nested definition list

I heard you like definition lists.

Contextual Rows (Hover)

Striped & Bordered

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

Dark & Small (Compact)

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

Borderless & Thead Dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

Striped Columns & Divider

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

Cell Specific Context

Normal	Primary Cell	Success Cell	Danger Cell
Default	Main Data	Standard	Standard
Default	Standard	Approved	Standard
Default	Standard	Standard	Rejected

Light Hover

Mueve el mouse sobre las filas.

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

Dark Hover

El efecto hover es más sutil o gris claro.

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

Legend

Email

Email address We'll never share your email with anyone else.

Password

Example select 1 2 3 4 5

Example disabled select 1 2 3 4 5

Example multiple select 1 2 3 4 5

Datalist example

Example textarea

Default file input example

Color picker

Radio buttons

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Checkboxes

Default checkbox

Checked checkbox

Switches

Default switch checkbox input

Checked switch checkbox input

Ranges

Example range Disabled range Example range (steps)

Submit

• Active
• Link
• Link
• Disabled

Contextual Sizing

Example heading New

Example heading New

Example heading New

Default

With Label

Thin (1px)

Regular (20px - Default)

Thick (30px)

Basic & Badges

• Cras justo odio14
• Dapibus ac facilisis in2
• Morbi leo risus1

Active & Actions

Flush & Numbered

• An item
• A second item
• A third item

1. Cras justo odio
2. Dapibus ac facilisis in

Kitchen Sink

Header Navigation

Image Overlay

Horizontal

Standard

Flush (No borders)