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.


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


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.


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.

Website Tools and Examples

These content tools can help improve your website's appearance and usability:

Contact Us

Web and Internal Communications
Still Hall 110

Rachel Xidis
Associate Director

Website Update Request Form

Back to top