Skip navigation

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.

This demo only works on the sm screen size and up. You're on xs right now.

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.