Buttons

Use the following classes to create a styled button.

Standard Buttons

All buttons must have the .btn class. Change the color by adding .btn-primary or .btn-default to the link tag.

---

Sizes

Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

---

Alignment

Use text alignment classes on the button's parent container to control alignment of the button.

---

Button Width

Make a button span the full width of its parent container by adding .btn-block.

To make a button that's wider than the text that it contains, but not one that appears to fill the full width of its parent container, put the button in a narrower, centered column within a .row and use .btn-block to fill the width of that column.

Tip: To center a column, use .col-*-x and .col-offset-*-y, where x is an even number and 4 ≤ x ≤ 10, y is ([12 - x] / 2), and * is a size prefix like xs, sm, md, or lg. See Bootstrap's documentation on offsetting columns.

---

Icons

Buttons can contain icons. There are many icons available for you to utilize, but use them with discretion. Icons should be used only if they serve a purpose beyond aesthetic appeal.

---

Text Wrapping

If a button is used in a container that might become narrower than that button's natural width, by default, text will not wrap in the button. Use .btn-wrap to ensure that the button's text wraps properly in those cases.