AdminFlare - Components

Buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-blue`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-cyan` `btn btn-info`	Used as an alternative to the default styles
	`btn btn-green` `btn btn-success`	Indicates a successful or positive action
	`btn btn-orange` `btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-red` `btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-black` `btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use
	`btn btn-pink`	Pink button
	`btn btn-link`	Deemphasize a button by making it look like a link while maintaining button behavior

Button sizes

<p>
  <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
  <button class="btn" type="button">Default button</button>
</p>
<p>
  <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
  <button class="btn btn-mini" type="button">Mini button</button>
</p>

Block level buttons

<button class="btn btn-large btn-block btn-primary" type="button">
  Block level button
</button>
<button class="btn btn-large btn-block" type="button">
  Block level button
</button>

Buttons disabled state

Quick buttons

12 Dashboard 12 Layout 12 Typography Forms Tables Components

Button groups

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

<div class="btn-toolbar">
  <div class="btn-group">
	...
  </div>
  ...
</div>

<div class="btn-group btn-group-vertical">
  ...
</div>

Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
	<span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
	<!-- dropdown menu links -->
  </ul>
</div>

Images

Add classes to an <img> element to easily style images in any project.

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

Dropdowns

<ul class="dropdown-menu" role="menu">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
  <li class="divider"></li>
  <li class="dropdown-submenu">
	<a tabindex="-1" href="#">More options<a>
	<ul class="dropdown-menu">
	  <li><a tabindex="-1" href="#">Second level link</a></li>
	  <li><a tabindex="-1" href="#">Second level link</a></li>
	  <li><a tabindex="-1" href="#">Second level link</a></li>
	  <li><a tabindex="-1" href="#">Second level link</a></li>
	  <li><a tabindex="-1" href="#">Second level link</a></li>
	</ul>
  </li>
</ul>

Basic tabs

<ul class="nav nav-tabs">
  <li class="active">
	<a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Basic pills

<ul class="nav nav-pills">
  <li class="active">
	<a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Stacked tabs

<ul class="nav nav-tabs nav-stacked">
  <li class="active">
	<a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Stacked pills

<ul class="nav nav-pills nav-stacked">
  <li class="active">
	<a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Tabs with dropdowns

<ul class="nav nav-tabs">
  <li class="dropdown">
	<a class="dropdown-toggle"
	   data-toggle="dropdown"
	   href="#">
		Dropdown
		<b class="caret"></b>
	  </a>
	<ul class="dropdown-menu">
	  <!-- links -->
	</ul>
  </li>
</ul>

Pills with dropdowns

<ul class="nav nav-pills">
  <li class="dropdown">
	<a class="dropdown-toggle"
	   data-toggle="dropdown"
	   href="#">
		Dropdown
		<b class="caret"></b>
	  </a>
	<ul class="dropdown-menu">
	  <!-- links -->
	</ul>
  </li>
</ul>

Nav lists

<ul class="nav nav-list">
  <li class="nav-header">List header</li>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  ...
</ul>

Breadcrumbs

<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">/</span></li>
  <li><a href="#">Library</a> <span class="divider">/</span></li>
  <li class="active">Data</li>
</ul>

Pagination

<div class="pagination">
  <ul>
	<li class="disabled"><a href="#">Prev</a></li>
	<li class="active"><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">Next</a></li>
  </ul>
</div>

<div class="pagination pagination-large">
  ...
</div>

<div class="pagination pagination-small">
  ...
</div>

<div class="pagination pagination-mini">
  ...
</div>

Pager

<ul class="pager">
  <li class="disabled"><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

<ul class="pager">
  <li class="previous disabled">
	<a href="#">← Older</a>
  </li>
  <li class="next">
	<a href="#">Newer →</a>
  </li>
</ul>

Counters

765

0 0 7 6 5

<div class="counter"><span>765</span></div>

<div class="counter small">...</div>

<div class="counter-separated">
  <span>0</span>
  <span>0</span>
  <span>7</span>
  <span>6</span>
  <span>5</span>
</div>

<div class="counter-separated small">...</div>

Labels

Labels	Markup
Default	`<span class="label">Default</span>`
Success	`<span class="label label-success">Success</span>` `<span class="label label-green">Success</span>`
Warning	`<span class="label label-warning">Warning</span>` `<span class="label label-orange">Warning</span>`
Important	`<span class="label label-important">Important</span>` `<span class="label label-red">Important</span>`
Info	`<span class="label label-info">Info</span>` `<span class="label label-cyan">Info</span>`
Inverse	`<span class="label label-inverse">Inverse</span>` `<span class="label label-black">Inverse</span>`
Blue	`<span class="label label-blue">Blue</span>`
Pink	`<span class="label label-pink">Pink</span>`

Badges

Name	Example	Markup
Default	1	`<span class="badge">1</span>`
Success	2	`<span class="badge badge-success">2</span>` `<span class="badge badge-green">2</span>`
Warning	4	`<span class="badge badge-warning">4</span>` `<span class="badge badge-orange">2</span>`
Important	6	`<span class="badge badge-important">6</span>` `<span class="badge badge-red">2</span>`
Info	8	`<span class="badge badge-info">8</span>` `<span class="badge badge-cyan">2</span>`
Inverse	10	`<span class="badge badge-inverse">10</span>` `<span class="badge badge-black">2</span>`
Blue	12	`<span class="badge badge-blue">12</span>`
Pink	15	`<span class="badge badge-pink">15</span>`

Alerts

<div class="alert">
  <a href="#" class="close" data-dismiss="alert">×</a> ...
</div>

<div class="alert alert-error">
  <a href="#" class="close" data-dismiss="alert">×</a> ...
</div>

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert">×</a> ...
</div>

<div class="alert alert-info">
  <a href="#" class="close" data-dismiss="alert">×</a> ...
</div>

× Warning! Best check yo self, you're not looking too good.

× Oh snap! Change a few things up and try submitting again.

× Well done! You successfully read this important alert message.

× Heads up! This alert needs your attention, but it's not super important.

Progress bars

Example	Markup
	`<div class="progress progress-blue"><div class="bar" style="width: 60%;"></div></div>`
	`<div class="progress progress-cyan">...</div>` `<div class="progress progress-info">...</div>`
	`<div class="progress progress-green">...</div>` `<div class="progress progress-success">...</div>`
	`<div class="progress progress-orange">...</div>` `<div class="progress progress-warning">...</div>`
	`<div class="progress progress-red">...</div>` `<div class="progress progress-danger">...</div>`
	`<div class="progress progress-black">...</div>`
	`<div class="progress progress-pink">...</div>`

Striped progress bars

Similar to the solid colors, we have varied striped progress bars. Example: <div class="progress progress-striped">...</div>

Animated progress bars

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.