Button Options

You can easily add buttons to your website using either an anchor tag or a button tag (<a> and <button>).
To take advantage of the built in button styles all you need to do is add the .btn class to your element.

Button Sizes

To set the size of the button just add one of the following class names to the button tag:
.btn-large, .btn-medium, .btn-small, or .btn-mini.

Button Colors

To set the color of the button just add one of the following class names to the button tag:
.btn-blue,.btn-green, .btn-mono, .btn-orange, or .btn-red.

Rounded Corners

To add rounded corners just add:
.btn-rounded

Example Code

Large blue button with rounded corners:
<button class="btn btn-large btn-blue btn-rounded">Large Button</button>
<a class="btn btn-large btn-blue btn-rounded">Large Button</a>

Large button

Large button

Large button

Large button

Large button

Alert Boxes

× Warning! You obviously did something wrong … go back and talk to the tree.
<div class="alert">
 <a class="close" data-dismiss="alert">
<strong>Warning!</strong> You obviously did something wrong … go back and talk to the tree.
</div>
<div class="alert alert-error">
 <a class="close" data-dismiss="alert">
<strong>Yikes!</strong> It can't be done Captain, it can't be done!
</div>
× Yikes! It can't be done Captain, it can't be done!
× Uhhh … Pay no attention to the man behind the curtain.
<div class="alert alert-info">
 <a class="close" data-dismiss="alert">
<strong>Uhhh ...</strong> Pay no attention to the man behind the curtain.
</div>
<div class="alert alert-success">
 <a class="close" data-dismiss="alert">
<strong>Congratulations!</strong> You have managed to find this warning message.
</div>
× Congratulations! You have managed to find this warning message.
© 2013 Gary Byrd Contact Me