Bootstrap - Basic Buttons

Bootstrap has several classes that can be used to style HTML button elements.

The basic Bootstrap button is very plain - rounded corners, white background, and thin grey borders. You add the Bootstrap classes .btn and .btn-default to create a default button.
You can add the button classes on three HTML tags:

  • <button>
  • <a>
  • <input>

Listing 11.1 - Four Button tags


Button Classes and Sizes

As with other Bootstrap elements, there are secondary button classes that change the color and size of the buttons:

  • btn-default — The standard button
  • btn-primary — The primary action in a set of buttons
  • btn-success — Indicates a successful or positive action
  • btn-info — Contextual button for informational alert buttons
  • btn-warning — Indicates that caution should be taken with this action
  • btn-danger — Indicates a dangerous or negative action
  • btn-link — Makes the button look like a link while still behaving like a button

Listing 11.2 - Seven Button Types in Bootstrap

There are four button sizes in Bootstrap. Medium is the default, but there are three classes to create a large, small, or extra-small button:

  • .btn-lg
  • .btn-sm
  • .btn-xs

Listing 11.3 - Change the Button Sizes

Button States

Buttons can be set to appear active or disabled. They did not give the code for this, but it should look something like this:

(End of examples of basic button styles.)