Content
Typography
Headings
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
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.
Images
Tables
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 |
Striped Rows
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Table Dark Striped Rows
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Table Hover
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Table Dark Hover
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Table Striped Hover
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Table Striped Columns
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Table Dark Striped Columns
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Figures
Components
Accordion
.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
Badges
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Breadcrumb
Buttons
Button Group
Card
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard 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
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
Carousel (Dark variant)
Close button
Collapse
Dropdowns
Modal
Navbar
Offcanvas
Offcanvas
Placeholders
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewherePopovers
Progress
Labels
Multiple Bars
Striped
Animated
Scrollspy
@fat
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. tattooed, cred irony biodiesel keffiyeh artisan.
@mdo
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. tattooed, cred irony biodiesel keffiyeh artisan..
one
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. tattooed, cred irony biodiesel keffiyeh artisan.
two
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. tattooed, cred irony biodiesel keffiyeh artisan.
three
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. tattooed, cred irony biodiesel keffiyeh artisan.
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork yr lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan photo booth 3 wolf moon. tattooed, cred irony biodiesel keffiyeh artisan.
Spinners
Tabs
Toasts
Tooltips
Forms
Checks & Radios
Switches
Select
Disabled Select
Disabled Input
Disabled Fieldset
Read Only
Range
File Input
Input Color
Datalists
Input Group
Floating Labels
Validation
Server Side
Tooltips
Helpers
Clearfix
Color & background
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.
Colored links
Primary link Secondary link Success link Danger link Warning link Info link Light link Dark linkRatio
Stacks
gap
property is not supported in Internet Explorer 11. A CSS polyfill is included but does not currently include responsive breakpoints. E.g .hstack .gap-3
will have the correct spacing, but .hstack .gap-md-3
will not.Vertical
Horizontal
Horizontal with Vertical rule
Text truncation
Vertical rule
Utilities
Background
Background Color
Background Gradient
Background Opacity
Borders
Color
Width
Radius
Radius Sizes
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
Flex
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
Interactions
Text Selection
This paragraph will be entirely selected when clicked by the user.
This paragraph has default select behavior.
This paragraph will not be selectable when clicked by the user.
Pointer events
This link can not be clicked.
This link can be clicked (this is default behavior).
This link can not be clicked because the
pointer-events
property is inherited from its parent. However, this
link
has a pe-auto
class and can be clicked.
Opacity
Position
unread messagesShadows
Sizing
Text
Text wrapping and overflow
Word Break
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
Font weight and italics
Bold text.
Bolder weight text (relative to the parent element).
Semibold weight text.
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
Text with normal font style
Line height
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
Text decoration
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removed