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.
+
++ +
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
+ +
Image thumbnails
+ +
Aligning images
+ +
+ +
+ +
Tables
| # | +First | +Last | +Handle | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry | +the Bird | +
+ +
Table head options
| # | +First | +Last | +Handle | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry | +the Bird | +
| # | +First | +Last | +Handle | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry | +the Bird | +
+ +
Striped rows
| # | +First | +Last | +Handle | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry | +the Bird | +
+ +
Bordered table
| # | +First | +Last | +Handle | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry the Bird | +||
+ +
Borderless table
| # | +First | +Last | +Handle | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry the Bird | +||
+ +
Hoverable rows
| # | +First | +Last | +Handle | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry the Bird | +||
+ +
Small table
| # | +First | +Last | +Handle | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry the Bird | +||
+ +
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 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
Primary card title
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Secondary card title
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Success card title
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Danger card title
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Warning card title
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Info card title
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Light card title
+Some quick example text to build on the card title and make up the bulk of the card's content.
+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
+ +
+ +
Collapse
+ + Link with href + + +
++ +
Collapse > Multiple targets
+ Toggle first element + + +
++ +
Collapse > Accordion
+ +
++ +
++ +
++ +
Dropdowns
+ +
+ +
+ +
Forms
+ +
+ +
Forms > Form controls
+ +
+ +
Forms > Sizing
+ +
+ +
Forms > Checkboxes and radios
+ +
+ +
Forms > Custom Elements
+ +
+ + + +
+ +
+ +
Input group
+ +
Input group > Sizing
+ +
Input group > Checkboxes and radios
+ +
Input group > Multiple inputs
+ +
Input group > Multiple addons
+ +
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
+ +
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
+ +
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
+ ++ + + + + + + + + + + + +
+ +
Colors > Background color
+ +
Display property
+ +d-block +d-block + +
+ +
Floats
+
+
+
+
+
+
+ +
Shadows
+ +
Sizing
+ +
+ +
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 setmargin
+ p- for classes that setpadding
+
Where sides is one of:
+-
+
t- for classes that setmargin-toporpadding-top
+ b- for classes that setmargin-bottomorpadding-bottom
+ l- for classes that setmargin-leftorpadding-left
+ r- for classes that setmargin-rightorpadding-right
+ x- for classes that set both*-leftand*-right
+ y- for classes that set both*-topand*-bottom
+ - blank - for classes that set a
marginorpaddingon all 4 sides of the element
+
Where size is one of:
+-
+
0- for classes that eliminate themarginorpaddingby setting it to0
+ 1- (by default) for classes that set themarginorpaddingto$spacer * .25
+ 2- (by default) for classes that set themarginorpaddingto$spacer * .5
+ 3- (by default) for classes that set themarginorpaddingto$spacer
+ 4- (by default) for classes that set themarginorpaddingto$spacer * 1.5
+ 5- (by default) for classes that set themarginorpaddingto$spacer * 3
+ auto- for classes that set themarginto 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
+
+ +
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 | +
+ + + +
+ +