Components
A wealth of reusable components that play nicely together for simplifying the app building process.
navs
tabs
Tabs provide a clean way to separate distinct views.
Example
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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.
indicators
alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Example
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
search input
list groups
basic
The most basic list group is simply an unordered list with list items, and the proper classes. Apply the .active class to highlight a list item. Apply the .unselectable class to remove the item hover style.
Apply the .list-group-item-muted class to provide a distinct style useful for header rows.
Apply the .list-group-item-condensed class to reduce the top/bottom padding on the item, which is useful for providing a distinct row style when using with header rows.
Apply the .list-group-item-borderless class to remove the top border on a list-group-item, which is useful for stronger association of list items.
Example
- Dapibus ac facilisis in
- Active item. Cras justo odio
- Dapibus ac facilisis in
- Remove item border. Dapibus ac facilisis in
- Without hover state. Dapibus ac facilisis in
- Muted state. Dapibus ac facilisis in
- Condensed list item. Dapibus ac facilisis in
badge
Add the badges component to any list group item and it will automatically be positioned on the right.
Example
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
content
Add nearly any HTML within, even for linked list groups like the one below.
Example
-
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.
borders
All list groups are minimally styled with no outer borders and only a thin top level border per item. This ensures the aesthetics of the list when placed within an app. However, there are occasions when a list group requires a top or bottom border to visually break up the components on the page.
Applying the .list-group-border-top class will set a border on the top of the list group.
Applying the .list-group-border-bottom class will set a border on the bottom of the list group.
Applying the .list-group-border-vertical class will set a border on the sides of the list group.
If you require to apply a complete border on top, bottom and sides, then rather than adding the three classes above, you can apply the .list-group-border-all class which has the same effect as applying the three above classes to the list-group element.
Border Top
Example
- Dapibus ac facilisis in
- Duis velit libero
- Mauris laoreet a libero
- Vivamus eget egestas
Border Bottom
Example
- Dapibus ac facilisis in
- Duis velit libero
- Mauris laoreet a libero
- Vivamus eget egestas
Border Vertical
Example
- Dapibus ac facilisis in
- Duis velit libero
- Mauris laoreet a libero
- Vivamus eget egestas
media group item
list
Example
-
Nulla euismod, sapien eu lacinia
Donec eu ipsum vel massa pretium vene. In hac habitasse platea dictumst. Donec nec ligula pretium
-
A media badge image left aligned
Loose margin on header
Tight margin on footer
-
Joe Bloggs
Developer
£103,234
-
Duis velit libero, condimentum eget
Vivamus eget egestas nibh. Nam vitae tincidunt est. Aliquam erat volutpat. Aliquam et neque est; nam ligula.
-
Mauris laoreet a libero quis cursus
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras in ipsum justo. Sed ornare ipsum scelerisque sapien porttitor maximus. Aenean tempus sit amet arcu sit amet laoreet
-
Joe Bloggs
Developer
R&D
£103,234
-
Joe Bloggs
Mauris laoreet a libero quis cursus senectus et netus
Example
-
Nulla euismod, sapien eu lacinia
Donec eu ipsum vel massa pretium vene. In hac habitasse platea dictumst. Donec nec ligula pretium
-
A small amount of content
-
Joe Bloggs
Developer
R&D
£103,234
-
Duis velit libero, condimentum eget
Vivamus eget egestas nibh. Nam vitae tincidunt est. Aliquam erat volutpat. Aliquam et neque est; nam ligula.
-
Mauris laoreet a libero quis cursus
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras in ipsum justo. Sed ornare ipsum scelerisque sapien porttitor maximus. Aenean tempus sit amet arcu sit amet laoreet
-
£103,234
R&D
Joe Bloggs
Developer
-
Mauris laoreet a libero quis cursus senectus et netus
Joe Bloggs
collapsible item
panels
notice
contextual
Example
Notice Default
You can customize the icon, title and text message to handle user messages inside your app.
Notice Primary
You can customize the icon, title and text message to handle user messages inside your app.
Notice Success
You can customize the icon, title and text message to handle user messages inside your app.
Notice Info
You can customize the icon, title and text message to handle user messages inside your app.
Notice Warning
You can customize the icon, title and text message to handle user messages inside your app.
Notice Danger
You can customize the icon, title and text message to handle user messages inside your app.