Use the following classes to create a styled button.
All buttons must have the
.btn class. Change the color by adding
.btn-default to the link tag.
.btn-xs for additional sizes.
Use text alignment classes on the button's parent container to control alignment of the button.
Make a button span the full width of its parent container by adding
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
x is an even number and 4 ≤ x ≤ 10,
y is ([12 - x] / 2), and
* is a size prefix like
lg. See Bootstrap's documentation on offsetting columns.
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.
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.