Choose color scheme

Forms & Form-controls

Basic example

Inputs

Custom checkbox

Inline checkbox

Custom radio buttons

Inline radio buttons


Inline form

Horizontal form

Selects

Form states

Tables

Basic example

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Contextual classes

# Column heading Column heading Column heading
1 Column content Column content Column content
2 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
6 Column content Column content Column content
7 Column content Column content Column content

Bordered table

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Images and Carousel

Buttons group

  • Basic example

  • Button toolbar

  • Sizing

  • Nesting

Input groups

Basic example

@

.00

$ .00

Segmented buttons

Checkboxes and radio addons

Button addons

Buttons with dropdowns

Breadcrumbs, pagination, labels, badges

Breadcrumbs

Labels

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Available variations

Default Primary Success Info Warning Danger

Badges

Inbox 42

Alerts & Progress bars

Dismissable alerts

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

Progress bars

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
45% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Panels

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, reprehenderit, quia, ducimus similique eius eos nostrum laudantium debitis quae ipsam vero esse eveniet dicta qui aut. Voluptatum, dolore ut alias?

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, reprehenderit, quia, ducimus similique eius eos nostrum laudantium debitis quae ipsam vero esse eveniet dicta qui aut. Voluptatum, dolore ut alias?

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, reprehenderit, quia, ducimus similique eius eos nostrum laudantium debitis quae ipsam vero esse eveniet dicta qui aut. Voluptatum, dolore ut alias?

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, reprehenderit, quia, ducimus similique eius eos nostrum laudantium debitis quae ipsam vero esse eveniet dicta qui aut. Voluptatum, dolore ut alias?

Typography

Headings

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

Lead, paragraphs, emphasis classes

Lorem ipsum dolor sit amet, strong adipisicing elit. Ipsum, sapiente, provident beatae quidem laudantium eveniet maiores itaque eaque dicta Itallic consequuntur animi. Tempora, modi, autem fuga tempore omnis maxime totam.

small ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, sapiente, provident beatae quidem laudantium eveniet maiores itaque eaque dicta laboriosam consequuntur animi. Tempora, modi, autem fuga tempore omnis maxime totam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, sapiente, provident beatae quidem laudantium eveniet maiores itaque eaque dicta laboriosam consequuntur animi. Tempora, modi, autem fuga tempore omnis maxime totam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, cumque, officiis fuga quia ipsum tenetur nostrum ea vel necessitatibus laudantium recusandae distinctio dolorem dicta quisquam dolores non quas in optio.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, expedita, illo error iure nisi veritatis nesciunt eius officiis sint necessitatibus repellat officia omnis illum. Blanditiis, necessitatibus consequatur aliquid placeat eius.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, libero, voluptatum, ipsam consectetur nemo excepturi impedit repudiandae nostrum maxime magnam quam deleniti cupiditate illo porro saepe molestias quaerat pariatur temporibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, mollitia magni dignissimos fugit consectetur eveniet totam quibusdam hic! Deserunt, hic voluptates perspiciatis odio repellat fuga ullam fugiat facilis incidunt illum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, dolore cum alias repellendus asperiores eveniet hic quidem accusantium. Doloremque cumque harum modi ipsum facilis magnam a voluptates? Quaerat, dicta enim?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, temporibus, id ipsum doloremque quas quia ut officia sit nesciunt quam a facere sed laborum alias aliquid blanditiis asperiores dignissimos at.

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

Modal

Collapse, tooltips, tabs, popovers

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.

Tooltips

Popovers

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. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.