Bootstrap, from Twitter

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.

Default styles

All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.

Example form legend
Some value here
Small snippet of help text
Success!
Ruh roh!
Example form legend
@
Here's some help text
Example form legend
Note: Labels surround all the options for much larger click areas and a more usable form.
to All times are shown as Pacific Standard Time (GMT -08:00).
Block of help text to describe the field above if need be.
 

Stacked forms

Add .form-stacked to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.

Example form legend
Example form legend
Small snippet of help text
Note: Labels surround all the options for much larger click areas and a more usable form.
 

Form field sizes

Customize any form input, select, or textarea width by adding just a few classes to your markup.

As of v1.3.0, we have added the grid-based sizing classes for form elements. Please use the these over the existing .mini, .small, etc classes.

Buttons

As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.

All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue .primary class, a light-blue .info class, a green .success class, and a red .danger class.

Example buttons

Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

    

Alternate sizes

Fancy larger or smaller buttons? Have at it!

Disabled state

For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.

Links

Buttons