Boostwatch

Accordions

One at a time

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.
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.
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.

Multiple openable

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.
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.
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.

Bullet point

  • first
    • 1.1
      • 1.1.1
      • 1.1.2
    • 1.2
  • second
  • third
  • fourth

Buttons

Default

Hover

Pressed

Disabled

Default

Hover

Pressed

Disabled

Sizes

First slide
Slide 1

Lorem ipsum dolor sit amet

Second slide
Slide 2

Lorem ipsum dolor sit amet

Third slide
Slide 3

Lorem ipsum dolor sit amet

Containers

Cards

Placeholder

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

Dialogs

Popovers

Tooltips

Forms

Left aligned labels
A longer block of help text that breaks onto a new line and may extend beyond one line.
Orange Radios

Top aligned labels
This is an error message.
This is a hint message.
$
Sorry, that username's taken. Try another?
Sorry, that username's taken. Try another?
Sorry, that username's taken. Try another?
Check the formatting of that and try again.
Check the formatting of that and try again.
Check the formatting of that and try again.

Indicators

Alerts

Orange Alerts

Badge

Primary Secondary Success Danger Warning Info Light Dark
This is a sample default link

Some text in a paragraph, and so the link are underline

This is a sample link with arrow This is a sample link with arrow for backward

Local navigation bar

Modal window or popin.

Tabs

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.

Breadcrumbs

Pagination

Standard pagination with numbers

Buttons

Buttons + page counter

Buttons + Back/Next labels

Priority Nav

Progress bars

Basic

Contextual alternatives

Stepbar

Indicate the current step within a sequential navigation.

Stepbar

Tables

Striped table
# Status Column heading Column heading Column heading
1 Ok Column content Column content Column content
2 Ok Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
Checkbox table
Status Column heading Column heading Column heading
Ok Column content Column content Column content
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content
Thumbnails table
Name Column heading Column heading Column heading
folder Finance Column content Column content Column content
file File Column content Column content Column content
Image 1 Column content Column content Column content
Image 2 Column content Column content Column content
Icons table
Item 1 Item 1 Item 1 Item 1
Item 1 checked checked checked
Item 2 checked checked
Item 3 checked

Sortable table

Calls received
Date
Number
Place called
Call class
Duration
Cost
11/10/12 447765896324 Orange SMS - 0.10
09/10/12 447765896321 BT Freefone talk 0:19:09 0.158
10/10/12 447765896322 Free talk 0:10:06 0.089
08/10/12 447765896321 BT Freefone talk 0:05:40 0.214

Responsive table

Default scroll table

Native Bootstrap solution

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

Orange card responsive table

Table responsive switch row to card display on tablet.

Calls received
Date Number Place called Call class Duration Cost
8 octobre 2012 447765896321 BT Freefone talk 0:05:40 0.214
9 octobre 2012 447765896321 BT Freefone talk 0:19:09 0.158
10 octobre 2012 447765896322 Free talk 0:10:06 0.089
11 octobre 2012 447765896324 Orange SMS - 0.10

Tabs

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.test focus 4

Without border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.test focus 4

Responsive

Switch to accordions in mobile

Tab 1
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.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title