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>

---

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:

---