Fluid container

Fixed container

Utilities

Modifiers

{ xs | sm | md | lg | xl } - available sizes for classes, example .d-sm-none - hide on mobile and smaller

{ x | y | t | b | l | r} - available positions x - horizontal, y - vertical, t - top, b - bottom etc, example .mx-0 - remove margin horizonally only

Useful classes

.d-none or .d-{xs|sm|md|lg|xl}-none - hide element

.sr-only - hide element, but make available for screen reader only

.text-left | .text-center | .text-right - text alignment

.m{x|y|t|b|l|r}-{xs|sm|md|lg|xl}-{0-5} - apply margin, eg .m-0 - no margin for all sizes, .my-md-2 - vertical margin for tablet+ of .5 $spacer

.p{x|y|t|b|l|r}-{xs|sm|md|lg|xl}-{0-5} - apply padding, eg .m-0 - no padding for all sizes, .px-md-2 - horizontal padding for tablet+ of .5 $spacer

.row-g-0 - no margins on row element

more info

Block buttons

Button group - horizontal

Button group - checkbox

Button group - radio

Button group - vertical

Button toolbar

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading with muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Lead

This is a lead paragraph. It stands out from regular paragraphs.

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.

Unstyled list

  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.

Inline list

  • This is a list item.
  • And another one.
  • But they're displayed inline.

Inline code

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

Code block

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

Variables

y = mx + b

User input

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Sample

This text is meant to be treated as sample output from a computer program.

Text transform

Lowercased text.

Uppercased text.

CapiTaliZed text.

Font size

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

Font weight and italics

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

Emphasis classes

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Blockquotes

A well-known quote, contained in a blockquote element.

A well-known quote, contained in a blockquote element.

A well-known quote, contained in a blockquote element.

A well-known quote, contained in a blockquote element.

Responsive images

Responsive image

Thumbnail

...

Aligning images

Placeholder200x200 Placeholder200x200
...

Figure

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Collapse

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Accordion

This is the first item's accordion body. It is shown 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.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table - 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

Accented tables

Striped rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# 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
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Active tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Valid first name is required.
Valid last name is required.
@
Your username is required.
Please enter a valid email address for shipping updates.
Please enter your shipping address.
Please select a valid country.
Please provide a valid state.
Zip code required.


Payment

Full name as displayed on card
Name on card is required
Credit card number is required
Expiration date required
Security code required

Horizontal form

Radios

Horizontal form label sizing

File input

Range

Input groups

@
@example.com
https://example.com/users/
$ .00
@
With textarea
$ 0.00

Floating labels

Validation

Disabled fieldset example
Success! You've done it.
Sorry, that username's taken. Try another?

Color

Datalists

Alerts

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Badges

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

Spinners

Loading...

Basic

Contextual alternatives

Multiple bars

Striped

Animated

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

List groups

Cards

Header
Primary card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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

Header
Primary card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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

Card header
Special title treatment
Support card subtitle
Card image

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card title
Card subtitle

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

Card link Another link

Borders

border border-0 border-top-0 border-right-0 border-bottom-0 border-left-0
border-primary border-secondary border-success border-danger border-warning border-info border-light border-dark border-white

Modals

Popovers

Tooltips