General UI

  1. Home
  2. UI
  3. General

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

How to use:

Exactly like the original bootstrap tabs except you should use the custom wrapper .nav-tabs-custom to achieve this style.

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 alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
How to use:

Exactly like the original bootstrap tabs except you should use the custom wrapper .nav-tabs-custom to achieve this style.

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 alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Progress Bars

Progress Bars Different Sizes

.progress

40% Complete (success)

Class: .sm

20% Complete

Class: .xs

60% Complete (warning)

Class: .xxs

60% Complete (warning)

Progress bars

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

60% Complete (warning)

Vertical Progress Bars Different Sizes

By adding the class .vertical and .progress-sm, .progress-xs or .progress-xxs we achieve:

40%
100%
60%
60%

Vertical Progress bars

By adding the class .vertical we achieve:

40%
20%
60%
80%

Bootstrap Accordion & Carousel

Collapsible Accordion

Lorem ipsum Voluptate ad et culpa ad eu ex nulla voluptate nostrud consectetur nisi nisi incididunt voluptate enim labore occaecat qui laboris id sunt aute mollit reprehenderit aute non dolor labore tempor Duis ex deserunt proident elit enim culpa labore fugiat labore velit ut ea aute Ut laboris culpa consectetur ex tempor cillum consectetur enim do aute ut commodo mollit aute esse enim fugiat quis Excepteur enim in qui nostrud et ad nulla tempor cupidatat fugiat proident ut proident elit cupidatat laborum in fugiat amet elit mollit sit commodo reprehenderit enim minim sit Duis laboris dolor velit sed dolore consequat ea magna ut laborum incididunt nostrud do non nisi minim anim dolor anim ex adipisicing ut ex Ut cupidatat consectetur ut magna est minim proident occaecat aliquip consectetur adipisicing dolor ea nulla dolore commodo reprehenderit velit nulla eu dolor proident aliqua elit est aliqua labore eiusmod.
Laborum commodo cupidatat adipisicing aliqua qui in dolore occaecat labore nisi occaecat enim dolor sit exercitation sit Duis minim tempor est aliquip sit nostrud ea ea sit nostrud dolore cillum exercitation officia sunt pariatur consequat velit id nulla id Duis minim sunt sint culpa amet veniam commodo nisi reprehenderit tempor irure sunt enim in eu reprehenderit anim nulla tempor pariatur nisi fugiat consectetur sint deserunt elit voluptate in in labore eiusmod nostrud eiusmod est ullamco sit qui ut ut velit in veniam in Ut nulla pariatur reprehenderit deserunt laboris sed cupidatat est dolore adipisicing Duis in ut dolore dolor sunt aute ut Excepteur sint consectetur.
Lorem ipsum Esse pariatur sit reprehenderit non culpa sint ullamco qui in aliquip enim exercitation laborum ut eu voluptate exercitation Duis dolore amet pariatur id occaecat incididunt deserunt nulla esse proident.
Lorem ipsum Do cupidatat in culpa magna voluptate ullamco et anim nulla cupidatat dolor culpa consequat quis dolor eu aliqua Ut eiusmod ullamco sint reprehenderit commodo veniam ea irure sit reprehenderit sunt sed sed proident ea incididunt esse cillum cupidatat officia Duis.

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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.