Page element examples from
Display 1 Display 2 Display 3 Display 4 Display 5 Display 6 Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
This is a lead paragraph. It stands out from regular paragraphs. And this word is a link: sample link. This is an example of a link in text. You can use the mark tag to
highlight
text.
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. A well-known quote, contained in a blockquote element. 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. Example heading New Example heading New Example heading New Example heading New Example heading New Example heading New Example heading New Example heading New Some quick example text to build on the card title and make up the bulk of the card's
content. Some quick example text to build on the card title and make up the bulk of the card's
content. Some quick example text to build on the card title and make up the bulk of the card's
content. 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 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. 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. 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. 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. 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.Contents
Typography
Documentation
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.
Images
Documentation
Tables
Documentation
#
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
Documentation
Forms
Overview
Documentation
Disabled forms
Documentation
Sizing
Documentation
Input group
Documentation
Floating labels
Documentation
Validation
Documentation
Components
Accordion
Documentation
.accordion-body,
though the transition does limit overflow.
.accordion-body,
though the transition does limit overflow.
.accordion-body,
though the transition does limit overflow.
Alerts
Documentation
Well done!
Badge
Documentation
Breadcrumb
Documentation
Buttons
Documentation
Button group
Documentation
Card
Documentation
Card title
Card title
Card title
Card title
Carousel
Documentation
Dropdowns
Documentation
List group
Documentation
Modal
Documentation
Navs
Documentation
Navbar
Documentation
Pagination
Documentation
Popovers
Documentation
Progress
Documentation
Scrollspy
Documentation
First heading
Second heading
Third heading
Fourth heading
Fifth heading
Toasts
Documentation
Tooltips
Documentation
@
@example.com
https://example.com/users/
$
.00
With textarea
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
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
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
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.
Primary Secondary
Success Danger
Warning
Info
Light Dark
Featured
Bootstrap 11 mins ago
Hello, world! This is a toast message.