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.
.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.
Customize any form
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
.small, etc classes.
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
Button styles can be applied to anything with the
.btn applied. Typically you’ll want to apply these to only
<button>, and select
<input> elements. Here’s how it looks:
Fancy larger or smaller buttons? Have at it!
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