Cheatsheet

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

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

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

Someone famous in Source Title

• 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 is a list item.
  • And another one.
  • But they're displayed inline.

  Images

  Placeholder

  A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

  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

  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

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

  Figures

  Placeholder

  A caption for the above image.

  Forms

  Overview

  Disabled forms

  Sizing

  Input group

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

  Floating labels

  Validation

  Components

  Accordion

  Accordion Item #1

  This is the first 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.

  Accordion Item #2

  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.

  Accordion Item #3

  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.

  Alerts

  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.

  Well done!

  Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

  Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

  Badge

  Example heading New

  Example heading New

  Example heading New

  Example heading New

  Example heading New

  Example heading New

  Example heading New

  Example heading New

  Primary Secondary Success Danger Warning Info Light Dark

  Breadcrumb

  Buttons

  Primary Secondary Success Danger Warning Info Light Dark Link Primary Secondary Success Danger Warning Info Light Dark Small button Standard button Large button

  Button group

  Card

  Placeholder

  Card title

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

  Card title

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

  2 days ago

  Card title

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

  • An item
  • A second item
  • A third item
  Placeholder

  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

  Carousel

  Placeholder

  First slide label

  Some representative placeholder content for the first slide.

  Placeholder

  Second slide label

  Some representative placeholder content for the second slide.

  Placeholder

  Third slide label

  Some representative placeholder content for the third slide.

  Previous Next

  Dropdowns

  Dropdown header

  Dropdown header

  Dropdown header

  • Action
  • Another action
  • Something else here
  • Action
  • Another action
  • Something else here
  • Action
  • Another action
  • Something else here
  • Action
  • Another action
  • Something else here
  • Action
  • Another action
  • Something else here
  • Action
  • Another action
  • Something else here

  Dropdown header

  Dropdown header

  Dropdown header

  Dropdown header

  List group

  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

  Modal

  Launch demo modal Launch static backdrop modal Vertically centered scrollable modal Full screen

  Navs

  This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

  This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

  This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

  Navbar

  Pagination

  Popovers

  Click to toggle popover Popover on top Popover on end Popover on bottom Popover on start

  Progress

  Scrollspy

  First heading

  This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

  Second heading

  This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

  Third heading

  This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

  Fourth heading

  This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

  Fifth heading

  This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.