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.

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

Bordered with thead, with colgroup

1 2 3
1 2 3
1 2 3
1 2 3

Bordered with thead and caption

Table caption
1 2 3
1 2 3
1 2 3
1 2 3

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

Fluid grid sizing

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

Forms

Prepend and append on inputs

@
@
$ .00

Prepend and append with uneditable

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

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.


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.

Button groups

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.

Responsive utility classes

Visible on...

Hidden on...