Grid System
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span2
.span2
.span2
.span2
.span2
.span2
.span3
.span3
.span3
.span3
.span4
.span4
.span4
.span6
.span6
.span5
.span7
.span12
Typography

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

ParagraphEach heading can have a subheading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Basic List

  • Item 1
    • Sub item 1
    • Sub item 2
    • Sub item 3
    • Sub item 4
    • Sub item 5
  • Item 2

.simple List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

Definition Lists

Basic

Biology
The science of life or living matter in all its forms and phenomena, especially with reference to origin, growth, reproduction, structure, and behavior.
Chemistry
The science that deals with the composition and properties of substances and various elementary forms of matter.
Geology
The science that deals with the dynamics and physical history of the earth, the rocks of which it is composed, and the physical, chemical, and biological changes that the earth has undergone or is undergoing.

.stacked

Biology
The science of life or living matter in all its forms and phenomena, especially with reference to origin, growth, reproduction, structure, and behavior.
Chemistry
The science that deals with the composition and properties of substances and various elementary forms of matter.
Geology
The science that deals with the dynamics and physical history of the earth, the rocks of which it is composed, and the physical, chemical, and biological changes that the earth has undergone or is undergoing.
Forms

Basic Form

Field Comment
Field Error

This is Legend

Form .stacked

Field Comment

Inline Forms based on Grid System

Multi-Column Form based on Grid System

Field's Comment
Field Comment
Field's Comment
Class ".span9"
Class ".span3"
Class ".span8"
Class ".span6"
Class ".span4"
Classes ".span3" + ".span3" + ".span3"
Class ".span8"
Class ".span3"
Class ".span6"
Class ".span3"
Tables

Basic Grid

First Name Last Name City Country
John Smith Dublin Ireland
Mark Samson London United Kingdom
Julie Thompson Preston United Kingdom
Tony Ramirez Barcelona Spain

.bordered & .zebra Grid

First Name Last Name City Country
John Smith Dublin Ireland Edit Edit Delete
Mark Samson London United Kingdom Edit Edit Delete
Julie Thompson Preston United Kingdom Edit Edit Delete
Tony Ramirez Barcelona Spain Edit Edit Delete
Menus
jQuery UI

Tabs

Tabs #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabs #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Notifications

Info

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Error

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Date Picker

Dialog

Buttons

Tooltip

Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip. But as it's not a native tooltip, it can be styled. Any themes built with ThemeRoller will also style tooltips accordingly.

Tooltips are also useful for form elements, to show some additional information in the context of each field. (hover the field to see the tooltip)

Tooltip can track your mouse movements too. Test here.

And also have custom styling and other options.

Misc

Buttons

Button with Dropmenu

Edit Edit Delete

Growl

FlexyFlexible Layouts

Box

I'm a regular box.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Updated
Error