Wells

Look, I'm in a well!

Optional classes

Look, I'm in a well!

Close icon

Default example

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Media list

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Examples and markup

Basic

Striped

Animated

Stacked

Options

Additional colors

Striped bars

Default alert

Warning! Best check yo self, you're not looking too good.

Options

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.

Contextual alternatives

Error or danger

Oh snap! Change a few things up and try submitting again.

Success

Well done! You successfully read this important alert message.

Information

Heads up! This alert needs your attention, but it's not super important.

Default thumbnails

Highly customizable

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action
Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action
Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

More examples

Hero unit

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Page header

Labels

Labels	Markup
Default	`<span class="label">Default</span>`
Success	`<span class="label label-success">Success</span>`
Warning	`<span class="label label-warning">Warning</span>`
Important	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Inverse	`<span class="label label-inverse">Inverse</span>`

Badges

Name	Example	Markup
Default	1	`<span class="badge">1</span>`
Success	2	`<span class="badge badge-success">2</span>`
Warning	4	`<span class="badge badge-warning">4</span>`
Important	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Inverse	10	`<span class="badge badge-inverse">10</span>`

Examples

Lightweight defaults Same markup, different classes

Basic tabs

Basic pills

Disabled state

Component alignment

Stackable

Stacked tabs

Stacked pills

Dropdowns

Tabs with dropdowns

Pills with dropdowns

Nav lists

Example nav list

Tabbable nav

Tabbable example

I'm in Section 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

Tabbable in any direction

Tabs on the bottom

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

Tabs on the left

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

Tabs on the right

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

Icon glyphs

icon-glass
icon-music
icon-search
icon-envelope
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-thumbs-up
icon-thumbs-down
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen

Icon examples

Buttons

Button group in a button toolbar

Dropdown in a button group

User

Button sizes

Star Star Star

Navigation

Form fields

Default styles

Optional layouts

Search form

Inline form

Horizontal form

Supported form controls

Inputs

Textarea

Checkboxes and radios

Default (stacked)

Inline checkboxes

Selects

Extending form controls

Prepended and appended inputs

Default options

Combined

Buttons instead of text

Button dropdowns

Segmented dropdown groups

Search form

Control sizing

Block level inputs

Relative sizing

Grid sizing

Uneditable inputs

Form actions

Help text

Inline help

Block help

Form control states

Input focus

Invalid inputs

Disabled inputs

Validation states

Inline

For example, <section> should be wrapped as inline.

Basic block

<p>Sample text here...</p>

Standard pagination

Options

Disabled and active states

Sizes

Alignment

Pager

Default example

Aligned links

Optional disabled state

Overview and examples

Works with all button sizes

Split button dropdowns

Sizes

Dropup menus

Examples

Single button group

Multiple button groups

Vertical button groups

Default styles

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

Optional classes

`.table-striped`

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

`.table-bordered`

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

`.table-hover`

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

`.table-condensed`

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

Optional row classes

Class	Description
`.success`	Indicates a successful or positive action.
`.error`	Indicates a dangerous or potentially negative action.
`.warning`	Indicates a warning that might need attention.
`.info`	Used as an alternative to the default styles.

#	Product	Payment Taken	Status
1	TB - Monthly	01/04/2012	Approved
2	TB - Monthly	02/04/2012	Declined
3	TB - Monthly	03/04/2012	Pending
4	TB - Monthly	04/04/2012	Call in to confirm

Supported table markup

Tag	Description
`<table>`	Wrapping element for displaying data in a tabular format
`<thead>`	Container element for table header rows (`<tr>`) to label table columns
`<tbody>`	Container element for table rows (`<tr>`) in the body of the table
`<tr>`	Container element for a set of table cells (`<td>` or `<th>`) that appears on a single row
`<td>`	Default table cell
`<th>`	Special table cell for column (or row, depending on scope and placement) labels
`<caption>`	Description or summary of what the table holds, especially useful for screen readers

Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Body copy

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Lead body copy

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Emphasis

`<small>`

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

Bold

The following snippet of text is rendered as bold text.

Italics

The following snippet of text is rendered as italicized text.

Alignment classes

Left aligned text.

Center aligned text.

Right aligned text.

Emphasis classes

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

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

Abbreviations

`<abbr>`

An abbreviation of the word attribute is attr.

`<abbr class="initialism">`

HTML is the best thing since sliced bread.

Addresses

`<address>`

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
Dit e-mailadres wordt beveiligd tegen spambots. JavaScript dient ingeschakeld te zijn om het te bekijken.

Blockquotes

Default blockquote

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

Blockquote options

Naming a source

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

Alternate displays

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

Lists

Unordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Unstyled

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Inline

Lorem ipsum
Phasellus iaculis
Nulla volutpat

Description

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Horizontal description

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Example

Disabled menu options

Sub menus on dropdowns

Default buttons

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use
	`btn btn-link`	Deemphasize a button by making it look like a link while maintaining button behavior

Menu

Home - Header Background Modern Slider

Bootstrap

Wells

Optional classes

Close icon

Default example

Media heading

Media heading

Media heading

Media list

Media heading

Nested media heading

Nested media heading

Nested media heading

Media heading

Examples and markup

Basic

Striped

Animated

Stacked

Options

Additional colors

Striped bars

Default alert

Options

Warning!

Contextual alternatives

Error or danger

Success

Information

Default thumbnails

Highly customizable

Thumbnail label

Thumbnail label

Thumbnail label

More examples

Hero unit

Hello, world!

Page header

Example page header Subtext for header

Labels

Badges

Examples

Basic navbar

Navbar components

Brand

Nav links

Forms

Search form

Optional display variations

Fixed to top

Fixed to bottom

Static top navbar

Responsive navbar

Inverted variation

Lightweight defaults Same markup, different classes

Basic tabs

Basic pills

Disabled state

Component alignment

Stackable

Stacked tabs

Stacked pills

Dropdowns

Tabs with dropdowns

Pills with dropdowns

Nav lists

Example nav list

Tabbable nav

Tabbable example

Tabbable in any direction

Tabs on the bottom

Tabs on the left

Tabs on the right

Icon glyphs

Icon examples

Buttons

Button group in a button toolbar

Dropdown in a button group

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`