General Elements
Buttons
Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Dialogs
Display a content in a layer above the App (like alert, helper text, etc) with Modal, Tooltips, and Popovers.
Hover on buttons below to see tooltips.
Click buttons below to see Popover.
Indicators
Provide contextual feedback messages for typical user actions and labeling components.
Badges
Primary primary Success Danger Warning Info Light Dark
Primary primary Success Danger Warning Info Light Dark
Primary primary Success Danger Warning Info Light Dark
Live View
Progress
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Contextual
Striped
Multiple bars
Animated
Sizing
Loading
Navs
The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Containers
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Cards
Provide a flexible and extensible content container with multiple variants and options.
Special title treatment
Support card subtitle
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita.
@stilearningTwit .
#encode
#admin
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
Support card subtitle
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita.
#admin
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita.
#admin
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita.
#admin
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita.
#admin
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita.
#admin
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita.
#admin
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita.
#admin
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita.
#admin
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita.
#admin
Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita.
#admin
Navbars
Expansion Cards
A lightweight container that may either stand alone or be connected to a larger surface, such as a card.