Core Typography
h1. Heading Secondary text
h2. Heading Secondary text
h3. Heading Secondary text
h4. Heading Secondary text
h5. Heading Secondary text
h6. Heading Secondary text
TIPS: Create lighter, secondary text in any heading with a generic <small> tag or the .small class.
Example body text
This is a lead paragraph. Make a paragraph stand out by adding .lead.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
An abbreviation of the word attribute is attr.
Address
Company Name795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
P: (123) 456-7890
first.last@example.com
Emphasis classes
This is a .mute paragraph.
This is a .text-primary paragraph.
This is a .text-warning paragraph.
This is a .text-danger paragraph.
This is a .text-success paragraph.
This is a .text-info paragraph.
Alignment classes
This is a left aligned text .text-left
This is a center aligned text .text-center
This is a right aligned text .text-right
This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages.
Create a justify aligned text with .text-justify class.
Blockquotes
This is a
<blockquote>in a<.well>.Quote’s author in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quote’s author in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quote’s author in Source Title
Color Swatches
Brand Colors
- #3498DB
- Brand Primary
- #7BC673
- Brand Secondary
- #ff8800
- Brand Warning
- #cc0000
- Brand Danger
- #0099cc
- Brand Info
- #669900
- Brand Success
Grayscale Levels
- #222222
- Gray Darker
- #444444
- Gray Dark
- #666666
- Gray
- #999999
- Gray Light
- #eeeeee
- Gray Lighter
- #f7f7f7
- Gray Lightest
Navigations
Forms
Buttons
Inputs
Sample Basic Form
Hero Units
Jumbotron
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Primary Jumbotron
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Masthead
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Primary Masthead
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Thumbnails
Extend Bootstrap’s grid system with the thumbnail component to easily display grids of images, videos, text, and more.
Default example
By default, Bootstrap’s thumbnails are designed to showcase linked images with minimal required markup.
Custom content
With a bit of extra markup, it’s possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
Tables
Basic Tables
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
Bordered Tables
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
Indicators
Alerts and Notifications
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it’s not super important.
Warning! Best check yo self, you’re not looking too good.
Badges
Labels
Primary
Success
Info
Warning
Danger
Other useful components
List groups
-
14
Cras justo odio -
2
Dapibus ac facilisis in - Morbi leo risus
-
1
Morbi leo risus -
2
Dapibus ac facilisis in