Use the following classes to create a styled button.
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.
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.
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.
These content tools can help improve your website's appearance and usability:
Web and Internal Communications
Still Hall 110
Rachel Xidis
Associate Director
815-753-3655
rachelx@niu.edu