UI Elements
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
A simple primary alert—check it out!
A simple primary alert—check it out!
A simple primary alert—check it out!
Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message
Shreyu
Hello, world! This is a toast message.
Shreyu
Hello, world! This is a toast message.
Shreyu
Hello, world! This is a toast message.
Shreyu
Hello, world! This is a toast message.
Badges
Default
Pill Badges
Badges Lighten
Cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content. With supporting text below as a natural lead-in to additional content.
Button
Card title
Some quick example text to build on the card title.
Dapibus ac facilisis in
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 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
Dropdown Examples
The best part is you can do this with any button variant, too:
Dropdown - More Examples
The best part is you can do this with any button variant, too:
Nav Tabs
Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
Nav Pills
Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
Accordions Example
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Custom Accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Modals
A rendered modal with header, body, and set of actions in the footer.
Examples
Pill Badges
Badges Lighten
Progressbars
Simple examples of progressbar
Striped Progressbars
Uses a gradient to create a striped effect.
Contextual Progressbars
Progress bars use some of the same button and alert classes for consistent styles.
Progressbars Size
We can set a height value on the .progress. The inner .progress-bar will automatically resize accordingly.
Popovers
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
Popovers
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
Spinners
Border spinner
Use the border spinners for a lightweight loading indicator.
Growing spinner
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
Offcanvas
Four options are available: top, bottom, left and right aligned.