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.

Someone famous in Source Title

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




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.



Code blocks


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


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



Responsive images


Responsive image



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






Alerts > Link color






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


Example heading New

Example heading New

Example heading New

Example heading New
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 image cap
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.





Cards > Card groups


Card image cap
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 image cap
Card title

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

Last updated 3 mins ago

Card image cap
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 image cap
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 image cap
Card title

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

Last updated 3 mins ago

Card image cap
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






Collapse


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


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


Action Another action Something else here

Action Another action Something else here

Action Another action Something else here
Separated link




Forms


We'll never share your email with anyone else.




Forms > Form controls






Forms > Sizing






Forms > Checkboxes and radios







Forms > Custom Elements










Input group


@
@example.com
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


Action Another action Something else here Separated link
Action Another action Something else here Separated link




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 > Live Demo






Modal > Vertically centered






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

.text-muted





Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Muted link





Colors > Background color


.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info




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





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