Customization Guide

---

• Grid system
• Buttons
• Icons
• Tables
• Widgets
• Tabs
• Other

Regular Buttons	Buttons + Icons	Split Buttons	Disabled Buttons	Smaller Buttons	Big Buttons
Default	Default	Default Action Another action Something else here Separated link	Default	Default	Default
Primary	Primary	Primary Action Another action Something else here Separated link	Primary	Primary	Primary
Success	Success	Success Action Another action Something else here Separated link	Success	Success	Success
Warning	Warning	Warning Action Another action Something else here Separated link	Warning	Warning	Warning
Info btn	Info btn	Info btn Action Another action Something else here Separated link	Info btn	Info btn	Info btn
Inverse	Inverse	Inverse Action Another action Something else here Separated link	Inverse	Inverse	Inverse

Regular Buttons

---

<!-- Default -->
<a href="#" class="btn btn-default btn-large btn-small btn-mini">Default</a>

<!-- Primary -->
<a href="#" class="btn btn-primary btn-large btn-small btn-mini">Primary</a>

Note: 	All buttons MUST have the .btn class, followed by optional styling classes;
	Replace [btn-*] bellow to any of the button classes eg. btn-default, btn-mini, etc.
	Also, all the btn-* classes can be used on most HTML elements, like <span>, <button>, 
	<input>, <a>, etc.

<!-- Disabled Button -->
<button class="btn [btn-*]" disabled="disabled">Disabled</button>

Split Buttons

---

<!-- Split Button -->
<div class="btn-group">
	<button class="btn [btn-*]">Button</button>
	<a class="btn [btn-*] dropdown-toggle" data-toggle="dropdown" href="#">
		<span class="caret"></span>
	</a>
	<ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		...
	</ul>
</div>

Buttons with Icons

---

<!-- Left icon -->
<a href="#" class="btn btn-primary glyphicons btn-icon home"><i></i>Primary</a>

<!-- Right icon -->
<!-- Currently, buttons with aligned icons are only available in block mode/full width buttons -->
<a href="#" class="btn btn-primary glyphicons btn-icon home btn-block right"><i></i>Primary</a>

Button styles

---

<!-- Info -->
<a href="#" class="btn btn-info">Info</a>

<!-- Success -->
<a href="#" class="btn btn-success">Success</a>

<!-- Warning -->
<a href="#" class="btn btn-warning">Warning</a>

<!-- Danger -->
<a href="#" class="btn btn-danger">Danger</a>

<!-- Info -->
<a href="#" class="btn btn-info">Danger</a>

<!-- Inverse -->
<a href="#" class="btn btn-inverse">Inverse</a>

Button sizes

---

<!-- Mini -->
<a href="#" class="btn btn-primary btn-mini">Primary</a>

<!-- Small -->
<a href="#" class="btn btn-primary btn-small">Primary</a>

<!-- Large -->
<a href="#" class="btn btn-primary btn-large">Primary</a>