Bootstrap

CSS Tests

One stop shop for quick debugging and edge-case tests of CSS.

Typography

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h1. Heading 1

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h2. Heading 2

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h3. Heading 3

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h4. Heading 4

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h5. Heading 5

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

h6. Heading 6

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Responsive images




Fluid grids

12
1
1
1
1
1
1
1
1
1
1
1
1
11
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
10
1
1
1
1
1
1
1
1
1
1
1
1
2
1
1
1
1
1
1
1
1
1
1
1
1
9
1
1
1
1
1
1
1
1
1
1
1
1
3
1
1
1
1
1
1
1
1
1
1
1
1
8
1
1
1
1
1
1
1
1
1
1
1
1
4
1
1
1
1
1
1
1
1
1
1
1
1
7
1
1
1
1
1
1
1
1
1
1
1
1
5
1
1
1
1
1
1
1
1
1
1
1
1
6
1
1
1
1
1
1
1
1
1
1
1
1
6
1
1
1
1
1
1
1
1
1
1
1
1

Tables

Bordered without thead

1 2 3
1 2 3
1 2 3

Bordered without thead, with caption

Table caption
1 2 3
1 2 3
1 2 3

Bordered without thead, with colgroup

1 2 3
1 2 3
1 2 3
3 6 9

Bordered with thead, with colgroup

A B C
1 2 3
1 2 3
1 2 3
3 6 9

Bordered with thead and caption

Table caption
1 2 3
1 2 3
1 2 3
1 2 3
3 6 9

Bordered with rowspan and colspan

1 2 3
1 and 2 3
1 2 3
1 3
2 and 3

Grid sizing

1 2 3
1 and 2 3
1 2 3
1 3
2 and 3

Nesting and striping

Test
Test Test
test test
test test
test test

Fluid grid sizing

1 2 3
1 and 2 3
1 2 3
1 3
2 and 3

Forms

Buttons and button groups

User

Horizontal form errors

Please correct the error

Prepend and append on inputs

@
@
$ .00

Prepend and append with uneditable

$ Some value here
Some value here .00
$ Some value here .00

Prepend with type="submit"

Fluid prepended and appended inputs

@
@
$.00

Fixed row with inputs

Inputs should not extend past the light red background, set on their parent, a .span* column.


Fluid row with inputs

Inputs should not extend past the light red background, set on their parent, a .span* column.


Inline form in fluid row


Fluid textarea at .span12


Selects


Dropdowns

Dropdown link with hash URL

Dropdown link with custom URL and data-target

Dropdown on a button


Thumbnails

Default thumbnails (no grid sizing)

Standard grid sizing

Fluid thumbnails

Tabs

I'm in Section 1.

I'm in Section 1.1.

I'm in Section 1.2.

I'm in Section 1.3.

Howdy, I'm in Section 2.

What up girl, this is Section 3.


Labels

Inline label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam Label name eget risus varius blandit sit amet non magna. Fusce .class-name dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Hey! Read this.

Buttons

Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Mini buttons: text and icon


Responsive utility classes

Visible on...

Hidden on...

Gradients

Horizontal

Vertical

Directional

Three colors

Radial

Striped

Horizontal three colors

Alerts

Alert default

Alert! Best check yourself, you're not looking too good.

Alert! Best check yourself, you're not looking too good.

Success

Success! Best check yourself, you're not looking too good.

Success! Best check yourself, you're not looking too good.

Info

Info! Best check yourself, you're not looking too good.

Info! Best check yourself, you're not looking too good.

Warning

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

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

Error

Error! Best check yourself, you're not looking too good.

Error! Best check yourself, you're not looking too good.