Heading Text
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
.
Link Colors
This is a link color blue .link-blue
This is a link color green .link-green
This is a link color caribbean-green .link-caribbean-green
This is a link color red .link-red
This is a link color yellow .link-yellow
This is a link color orange .link-orange
This is a link color pink .link-pink
This is a link color purple .link-purple
Address
Company Name795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890Full Name
P: (123) 456-7890
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
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
Tags
Color Swatches
Brand Colors
- #ff7f3a
- Brand Primary
- #428bca
- Brand Secondary
- #f0ad4e
- Brand Warning
- #d9534f
- Brand Danger
- #5bc0de
- Brand Info
- #5cb85c
- Brand Success
Grayscale Levels
- #222222
- Gray Darker
- #333333
- Gray Dark
- #555555
- Gray
- #999999
- Gray Light
- #eeeeee
- Gray Lighter
- #f7f7f7
- Gray Lightest
Buttons
Tanya Donk Tentang Photo Booth
Inputs
Indicators
Alerts and Notifications
error message title
Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.
sussess message title
Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.
info message title
Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.
warning message title
Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.
Badges
Labels
Misc
List groups
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- Morbi leo risus
- 1 Morbi leo risus
- 2 Dapibus ac facilisis in
List group item heading
Donec id elit non mi porta gravida at eget metus risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus.
List group item heading
Donec id elit non mi porta gravida at eget metus.
Panels
Panel primary
Panel success
Panel warning
Panel danger
Panel info