Note: this is intended to be used as a quick overview/reference. Visit https://getbootstrap.com/docs/ for full documentation!

# Headings

# h1. Bootstrap heading

## h2. Bootstrap heading

### h3. Bootstrap heading

#### h4. Bootstrap heading

##### h5. Bootstrap heading

###### h6. Bootstrap heading

# Display headings

# Display 1

# Display 2

# Display 3

# Display 4

# Lead

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim alias beatae sed dignissimos expedita inventore totam eius ut pariatur, quidem maxime, aut asperiores repellat. Labore laborum eius quibusdam placeat ratione.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim alias beatae sed dignissimos expedita inventore totam eius ut pariatur, quidem maxime, aut asperiores repellat. Labore laborum eius quibusdam placeat ratione.

# 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.

# Abbreviations

attr

HTML

# Blockquotes

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

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

# Lists

- 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
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem

- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat

# Inline code

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

# Variables

y = m x + b

# User input

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

# Sample output

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

# Responsive images

# Image thumbnails

# Aligning images

# Tables

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

# Table head options

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

# Striped rows

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

# Bordered table

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

# Borderless table

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

# Small table

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

# Contextual classes

Class | Heading | Heading
--- | --- | ---
Active | Cell | Cell
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

# 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!

# Alerts > 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.

# Badges

Primary Secondary Success Danger Warning Info Light Dark

# Badges > Pills

Primary Secondary Success Danger Warning Info Light Dark

# Badges > Links

Primary Secondary Success Danger Warning Info Light Dark

# Badges > In Elements

# Example heading New

# Badges > In Buttons

# Breadcrumbs

# Buttons

# Buttons > Outline

# Buttons > Sizes

# Button groups

# Button groups > Vertical

# Button groups > Button Toolbar

# Button groups > Sizing

# 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

# Cards (No Image)

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

# Cards > Card styles

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.

# Cards > Card groups

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

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

##### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

# Cards > Card decks

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

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

##### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

# Carousel

# Carousel > With Controls

Previous Next

# 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.

# Collapse > 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.
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.

# Collapse > Accordion

#####

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.

#####

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.

#####

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.

# Dropdowns

Dropdown link

# Forms

Email address We'll never share your email with anyone else.
Password
Check me out

# Forms > Form controls

Email address
Example select
Example multiple select
Example textarea
Example file input

# Forms > Sizing

# Forms > Checkboxes and radios

Default checkbox
Disabled checkbox
Default radio
Second default radio
Disabled radio

# Forms > Custom Elements

Check this custom checkbox
Toggle this custom radio
Or toggle this other custom radio
Choose file

# Input group

@
@example.com
Your vanity URL
https://example.com/users/
$
.00
With textarea

# Input group > Sizing

Small
Default
Large

# Input group > Checkboxes and radios

# Input group > Multiple inputs

First and last name

# Input group > Multiple addons

$ 0.00
$ 0.00

# Input group > Button addons

# Input group > Buttons with dropdowns

# 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

# List group

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

# List group > Active items

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

# List group > Disabled items

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

# List group > Links and buttons

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

# List group > Flush

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

# List group > Contextual classes

- Dapibus ac facilisis in
- A simple primary list group item
- A simple secondary list group item
- A simple success list group item
- A simple danger list group item
- A simple warning list group item
- A simple info list group item
- A simple light list group item
- A simple dark list group item

# List group > With badges

- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1

# List group > Custom content

##### List group item heading

3 days ago

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

Donec id elit non mi porta.

##### List group item heading

3 days ago

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

Donec id elit non mi porta.

##### List group item heading

3 days ago

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

Donec id elit non mi porta.

# Modal

##### Modal title

Modal body text goes here.

# Modal > Live Demo

##### Modal title

...

# Modal > Vertically centered

##### Modal title

...

# Navs

# Navs > Vertical

# Navs > Tabs

# Navs > Pills

# Navs > Fill and justify

# Navbar

# Navbar > Color schemes

# Pagination

# Pagination > Disabled and active states

# Popovers

# Popovers > Four directions

# Progress

# Progress > Labels

25%

# Progress > Height

# Progress > Backgrounds

# Progress > Multiple bars

# Progress > Striped

# Tooltips

# Borders

# Borders > Subtractive

# Borders > Border color

# Borders > Border-radius

# Clearfix

# Close icon

# Colors

.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

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Muted link

White link

# Colors > Background color

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

# Display property

d-inline
d-inline
d-block d-block

# Floats

Float left on all viewport sizes
Float right on all viewport sizes
Don't float on all viewport sizes
Float left on viewports sized SM (small) or wider
Float left on viewports sized MD (medium) or wider
Float left on viewports sized LG (large) or wider
Float left on viewports sized XL (extra-large) or wider

# Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

# Sizing

Width 25%
Width 50%
Width 75%
Width 100%
Width auto
Height 25%
Height 50%
Height 75%
Height 100%
Height auto

# Spacing Notation

Spacing utilities that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`.

Where property is one of:

- `m` - for classes that set `margin`
- `p` - for classes that set `padding`

Where sides is one of:

- `t` - for classes that set `margin-top` or `padding-top`
- `b` - for classes that set `margin-bottom` or `padding-bottom`
- `l` - for classes that set `margin-left` or `padding-left`
- `r` - for classes that set `margin-right` or `padding-right`
- `x` - for classes that set both `*-left` and `*-right`
- `y` - for classes that set both `*-top` and `*-bottom`
- blank - for classes that set a `margin` or `padding` on all 4 sides of the element

Where size is one of:

- `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
- `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25`
- `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5`
- `3` - (by default) for classes that set the `margin` or `padding` to `$spacer`
- `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5`
- `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3`
- `auto` - for classes that set the `margin` to auto

# Text alignment

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

# Text wrapping and overflow

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.

# Text transform

Lowercased text.

Uppercased text.

CapiTaliZed text.

# Font weight and italics

Bold text.

Normal weight text.

Light weight text.

Italic text.

# Vertical alignment

baseline top middle bottom text-top text-bottom

baseline | top | middle | bottom | text-top | text-bottom

Note: this is intended to be used as a quick overview/reference. Visit https://getbootstrap.com/docs/ for full documentation!