Color Palette
Primary
Info
Success
Warning
Danger
Gray
Navy
Teal
Purple
Orange
Maroon
Black
Alerts and Callouts
Alerts
Alert!
Danger alert preview. This alert is dismissable. A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.Alert!
Info alert preview. This alert is dismissable.Alert!
Warning alert preview. This alert is dismissable.Alert!
Success alert preview. This alert is dismissable.Callouts
I am a danger callout!
There is a problem that we need to fix. A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
I am an info callout!
Follow the steps to continue to payment.
I am a warning callout!
This is a yellow callout.
I am a success callout!
This is a green callout.
Custom Tabs
Progress Bars
Progress Bars Different Sizes
.progress
Class: .sm
Class: .xs
Class: .xxs
Progress bars
Vertical Progress Bars Different Sizes
By adding the class .vertical
and .progress-sm
, .progress-xs
or
.progress-xxs
we achieve:
Vertical Progress bars
By adding the class .vertical
we achieve:
Bootstrap Accordion & Carousel
Collapsible Accordion
Carousel
Typography
Headlines
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Text Emphasis
Lead to emphasize importance
Text green to emphasize success
Text aqua to emphasize info
Text purple to emphasize info
Text light blue to emphasize info (2)
Text red to emphasize danger
Text yellow to emphasize warning
Text muted to emphasize general
Block Quotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Block Quotes Pulled Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Unordered List
- 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
Ordered 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
Unstyled List
- 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
Description
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Description Horizontal
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.