Components

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

Sidebar

Additional styles and behavior for this component are located in the following files
Component styles
boostbox/assets/less/boostbox/sidebar.less
 
 
Component variables
boostbox/assets/less/shared/variables.less
@sidebar-width:
@sidebar-width-collapsed:
@sidebar-bg:
@sidebar-color:
@sidebar-color-selected:
@sidebar-color-icon:
@sidebar-sub-bg:
@sidebar-sub-color:
@sidebar-collapse-speed:
@sidebar-collapse-ease:

Add .sidebar-fixed to #sidebar to stick your sidebar to the left side of your screen. This will automatically add a scrollbar to your sidebar if needed. 

<div id="sidebar" class="sidebar-fixed">
	...
</div>

Add .sidebar-collapsed to the <body> to collapse your sidebar. 

<body class="sidebar-collapsed">
	...
</body>

Headerbar

Additional styles and behavior for this component are located in the following files
Component styles
boostbox/assets/less/boostbox/header-nav.less
 
 
Component variables
boostbox/assets/less/shared/variables.less
// Basics of a navbar
@headerbar-height:
@headerbar-padding-vertical:
@headerbar-bg:

// Navbar links
@headerbar-link-active-color:
@headerbar-link-active-bg:
@headerbar-link-disabled-color:
@headerbar-link-disabled-bg:

// Inverted headerbar
@headerbar-inverse-bg:
@headerbar-inverse-border:

// Inverted navbar links
@headerbar-inverse-link-active-bg:
@headerbar-inverse-link-disabled-color:
@headerbar-inverse-link-disabled-bg:

// Inverted navbar toggle
@headerbar-inverse-toggle-hover-bg:
@headerbar-inverse-toggle-icon-bar-bg:
@headerbar-inverse-toggle-border-color:

Fixed to top

Add .navbar-fixed-top to the .navbar in your #header to stick your header to the top of your screen. 

<header id="header">
	<nav class="navbar navbar-default navbar-fixed-top">
		...
	</nav>
</header>

Boxes

Boxes are a big part of the Boostbox styling. There are a lot of styling options for the .box class.

Additional styles and behavior for this component are located in the following files
Component styles
boostbox/assets/less/boostbox/box.less

Box tiles

Use .box-tiles to remove all padding on the direct .row and .col-* classes.

Example
.style-support1
.style-support5-gradient
.style-support2-gradient
.style-inverse
.style-primary-gradient
<div class="box box-tiles">
	<div class="row style-support1">
		<div class="col-md-5">
			<div class="box-body">.style-support1</div>
		</div>
		<div class="col-md-7 style-support5-gradient height-4">
			<div class="box-body">.style-support5-gradient</div>
		</div>
	</div>
	<div class="row style-support2-gradient">
		<div class="col-md-12">
			<div class="box-body">.style-support2-gradient</div>
		</div>
	</div>
	<div class="row style-inverse">
		<div class="col-md-7">
			<div class="box-body">.style-inverse</div>
		</div>
		<div class="col-md-5 style-primary-gradient height-4">
			<div class="box-body">.style-primary-gradient</div>
		</div>
	</div>
</div>

Box pricing

A pricing component that can optionally indent the top or bottom.
Use .box and .box-type-pricing to activate the price styling. Because it's based on .box it inherits its style properties.

Example

Basic

$

7

/mo

Rame aute irure dolor in reprehenderit pariatur.

  • 20 Pages
  • 100 GB Bandwidth
  • 1 GB Storage
  • 24/7 Customer Support
Sign up

Basic

$

7

/mo

Rame aute irure dolor in reprehenderit pariatur.

  • 20 Pages
  • 100 GB Bandwidth
  • 1 GB Storage
  • 24/7 Customer Support
Sign up

Basic

$

7

/mo

Rame aute irure dolor in reprehenderit pariatur.

  • 20 Pages
  • 100 GB Bandwidth
  • 1 GB Storage
  • 24/7 Customer Support
Sign up 
<div class="box box-type-pricing">
	<div class="box-body text-center style-inverse">
		<h2 class="text-light">Basic</h2>
		<div class="price">
			<span class="text-lg">$</span>
			<h2><span class="text-xxxl">7</span></h2> 
			<span>/mo</span>
		</div>
		<br/>
		<p class="opacity-50"><em>Rame aute irure dolor in reprehenderit pariatur.</em></p>
	</div>
	<div class="box-body no-padding style-body">
		<ul class="list-unstyled text-left">
			<li>20 Pages</li>
			<li>100 GB Bandwidth</li>
			<li>1 GB Storage</li>
			<li>24/7 Customer Support</li>
		</ul>
	</div>
	<div class="box-body style-body">
		<a class="btn btn-inverse">Sign up</a>
	</div>
</div>

If you want to indent the top or bottom, use .indent-top or .indent-bottom 

<div class="box box-type-pricing">
	...
</div>
		
<div class="box box-type-pricing indent-top">
	...
</div>
		
<div class="box box-type-pricing indent-bottom">
	...
</div>

Box locked

Use .box-type-locked to wrap around your .box. Logic for your <form> goes in .box-body.

Example

BoostBox

Enter your password to unlock

Daniel Johnson


Not Daniel Johnson? 
<div class="box-type-locked">
	<div class="box text-center style-transparent">
		<div class="box-head">
			<h2 class="text-light text-white">
				Boost<strong>Box</strong> 
				<i class="fa fa-rocket fa-fw"></i>
			</h2>
			<h4 class="text-light text-inverse-alt">Enter your password to unlock</h4>
		</div>
		<div class="box-body box-centered style-inverse">
			<img class="img-circle" src="..." alt="" />
			<h2 class="text-light">Daniel Johnson</h2>
			<form>
				<div class="input-group">
					<input type="password" class="form-control" placeholder="Password">
					<span class="input-group-btn">
						<button class="btn btn-equal btn-primary" type="submit">
							<i class="fa fa-unlock"></i>
						</button>
					</span>
				</div>
			</form>
			<br/>
			<a class="text-primary-alt" href="#">Not Daniel Johnson?</a>
		</div>
	</div>
</div>
Additional styles and behavior for this component are located in the following files
Component variables
boostbox/assets/less/shared/variables.less
@lock-header-height:	100px;
@lock-body-height:		330px;
@lock-body-width:			500px;
@lock-body-spacer:		25px;

Box login

Use .box-type-login to wrap around your .box. Logic for your <form> goes in .box-body.

Example
<div class="box-type-login">
	<div class="box text-center">
		<div class="box-head">
			<h2 class="text-light text-white">
				Boost<strong>Box</strong>
				<i class="fa fa-rocket fa-fw"></i>
			</h2>
			<h4 class="text-light text-inverse-alt">
				Ease your output with BoostBox
			</h4>
		</div>
		<div class="box-body box-centered style-inverse">
			<h2 class="text-light">Sign in to your account</h2>
			<br/>
			<form>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-user"></i></span>
						<input type="text" class="form-control" placeholder="Username">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-lock"></i></span>
						<input type="password" class="form-control" placeholder="Password">
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6 text-left">
						<div data-toggle="buttons">
							<label class="btn checkbox-inline btn-checkbox-primary-inverse">
								<input type="checkbox" value="default-inverse1"> Remember me
							</label>
						</div>
					</div>
					<div class="col-xs-6 text-right">
						<button class="btn btn-primary" type="submit">
							<i class="fa fa-key"></i>
							Sign in
						</button>
					</div>
				</div>
			</form>
		</div><!--end .box-body -->
		<div class="box-footer force-padding text-white">
			<a class="text-primary-alt" href="#">No account yet?</a> Or did you 
			<a class="text-primary-alt" href="#">forgot your password?</a>
		</div>
	</div>
</div>
Additional styles and behavior for this component are located in the following files
Component variables
boostbox/assets/less/shared/variables.less
@login-header-height:			100px;
@login-body-height:				275px;
@login-body-width:				500px;
@login-body-spacer:				25px;

Icons

In addition to the standard Bootstrap icons , Boostbox has several additional options.

Additional styles and behavior for this component are located in the following files
Component styles
boostbox/assets/less/boostbox/icons.less

Icons rotation

To rotate an icon you can use one of the following classes.

Example
            
<i class="fa fa-bell icon-tilt-alt"></i> <!-- 10 degrees -->
<i class="fa fa-bell"></i>
<i class="fa fa-bell icon-tilt"></i> <!-- 350 degrees -->

Icon sizes

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, fa-5x,fa-6x, fa-7x, fa-8x, fa-10x, fa-15x or fa-20x classes.

Example

<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>
<i class="fa fa-camera-retro fa-6x"></i>
<i class="fa fa-camera-retro fa-7x"></i>
<i class="fa fa-camera-retro fa-8x"></i>
<i class="fa fa-camera-retro fa-9x"></i>
<i class="fa fa-camera-retro fa-10x"></i>
<i class="fa fa-camera-retro fa-15x"></i>
<i class="fa fa-camera-retro fa-20x"></i>

Dropdowns

In addition to the standard Bootstrap dropdowns , Boostbox has several additional options.

Additional styles and behavior for this component are located in the following files
Component styles
boostbox/assets/less/boostbox/dropdowns.less

You can add animation to your dropdowns by adding .animation-zoom, .animation-slide or .animation-dock. If you put these classes on a menu that 'drops up', it will adjust the animation.

Example
<ul class="dropdown-menu animation-slide">
	...
</ul>
<ul class="dropdown-menu animation-zoom">
	...
</ul>
<ul class="dropdown-menu animation-dock">
	...
</ul>

To create a progressbar in your menu, add .dropdown-progress to the <li> element. Add text in the .dropdown-label and put your .progress bar beneath.

Example














<li class="dropdown-progress">
	<a href="#">
		<div class="dropdown-label">Label</div>
		<div class="progress"><div class="progress-bar progress-bar-success" style="width: 30%"></div></div>
	</a>
</li>

Buttons

In addition to the standard Bootstrap buttons , Boostbox has several additional options.

Additional styles and behavior for this component are located in the following files
Component styles
boostbox/assets/less/boostbox/buttons.less

Styling Checkboxes

Add data-toggle="buttons" to one or more checkboxes for a different style. You can give it several styles. In the example below it has a style .btn-checkbox-primary applied to it.

If you want your checkbox to be selected on load, apply the .active class to your .btn.

Example
<div data-toggle="buttons">
	<label class="btn btn-checkbox-default active">
		<input type="checkbox" name="checkbox1" value="1"> Checkbox 1
	</label>
</div>
<div data-toggle="buttons">
	<label class="btn btn-checkbox-primary">
		<input type="checkbox" name="checkbox2" value="1"> Checkbox 2
	</label>
</div>

Checkbox colors

There are several colors for you to choose from.

Example

<div data-toggle="buttons">
	<label class="btn btn-checkbox-default">...</label>
	<label class="btn btn-checkbox-default">...</label>
	<label class="btn btn-checkbox-primary">...</label>
	<label class="btn btn-checkbox-success">...</label>
	<label class="btn btn-checkbox-warning">...</label>
	<label class="btn btn-checkbox-danger">...</label>
	<label class="btn btn-checkbox-info">...</label>
	<label class="btn btn-checkbox-default-inverse">...</label>
	<label class="btn btn-checkbox-primary-inverse">...</label>
	<label class="btn btn-checkbox-success-inverse">...</label>
	<label class="btn btn-checkbox-warning-inverse">...</label>
	<label class="btn btn-checkbox-danger-inverse">...</label>
	<label class="btn btn-checkbox-info-inverse">...</label>
</div>

Styling Radiobuttons

Add data-toggle="buttons" to one or more radiobuttons for a different style. You can give it several styles. In the example below it has a style .btn-radio-primary applied to it.

If you want your radiobutton to be selected on load, apply the .active class to your .btn.

Example
<div data-toggle="buttons">
	<label class="btn radio-inline btn-radio-primary active">
		<input type="radio" name="radio1" value="1"> Checkbox 1
	</label>
	<label class="btn radio-inline btn-radio-primary">
		<input type="radio" name="radio2" value="1"> Checkbox 2
	</label>
</div>

Radiobutton colors

There are several colors for you to choose from.

Example

<div data-toggle="buttons">
	<label class="btn btn-radio-default">...</label>
	<label class="btn btn-radio-default">...</label>
	<label class="btn btn-radio-primary">...</label>
	<label class="btn btn-radio-success">...</label>
	<label class="btn btn-radio-warning">...</label>
	<label class="btn btn-radio-danger">...</label>
	<label class="btn btn-radio-info">...</label>
	<label class="btn btn-radio-default-inverse">...</label>
	<label class="btn btn-radio-primary-inverse">...</label>
	<label class="btn btn-radio-success-inverse">...</label>
	<label class="btn btn-radio-warning-inverse">...</label>
	<label class="btn btn-radio-danger-inverse">...</label>
	<label class="btn btn-radio-info-inverse">...</label>
</div>

Badges

In addition to the standard Bootstrap badges , Boostbox has several additional options.

Additional styles and behavior for this component are located in the following files
Component styles
boostbox/assets/less/boostbox/badges.less

Badge colors

Use any of the available badge classes to color a .badge.

Example

Badge Default

Badge black

Badge white

Badge gray

Badge inverse

Badge primary

Badge success

Badge warning

Badge danger

Badge info

Badge support1

Badge support2

Badge support3

Badge support4

Badge support5

<a href="#">Badge <span class="badge">Default</span></a>
<a href="#">Badge <span class="badge badge-black">black</span></a>
<a href="#">Badge <span class="badge badge-white">white</span></a>
<a href="#">Badge <span class="badge badge-gray">gray</span></a>
<a href="#">Badge <span class="badge badge-inverse">inverse</span></a>

<a href="#">Badge <span class="badge badge-primary">primary</span></a>
<a href="#">Badge <span class="badge badge-success">success</span></a>
<a href="#">Badge <span class="badge badge-warning">warning</span></a>
<a href="#">Badge <span class="badge badge-danger">danger</span></a>
<a href="#">Badge <span class="badge badge-info">info</span></a>

<a href="#">Badge <span class="badge badge-support1">support1</span></a>
<a href="#">Badge <span class="badge badge-support2">support2</span></a>
<a href="#">Badge <span class="badge badge-support3">support3</span></a>
<a href="#">Badge <span class="badge badge-support4">support4</span></a>
<a href="#">Badge <span class="badge badge-support5">support5</span></a>

Badge positioning

Use <sup> instead of <span> to position the badge above the baseline. Use <sub> instead of <span> to position the badge below the baseline.

Example

sup Badge     Badge sup

 

sub Badge     Badge sub 

<a href="#" class=""><sup class="badge badge-support2">sup</sup> Badge</a>
<a href="#" class="">Badge <sup class="badge badge-support2">sup</sup></a>
<a href="#" class=""><sub class="badge badge-support2">sub</sub> Badge</a>
<a href="#" class="">Badge <sub class="badge badge-support2">sub</sub></a>

Lists

In addition to the standard Bootstrap lists , Boostbox has several additional options.

Additional styles and behavior for this component are located in the following files
Component styles
boostbox/assets/less/boostbox/list-group.less

List colors

Use any of the available list classes to create a colored list.

Example
  • primary
  • Regular
  • Regular
  • success
  • Regular
  • Regular
  • warning
  • Regular
  • Regular
  • danger
  • Regular
  • Regular
  • info
  • Regular
  • Regular

  • support1
  • Regular
  • Regular
  • support2
  • Regular
  • Regular
  • support3
  • Regular
  • Regular
  • support4
  • Regular
  • Regular
  • support5
  • Regular
  • Regular

  • black
  • Regular
  • Regular
  • white
  • Regular
  • Regular
  • gray
  • Regular
  • Regular
  • inverse
  • Regular
  • Regular
  • body
  • Regular
  • Regular
<ul class="list-group list-primary">...</ul>
<ul class="list-group list-success">...</ul>
<ul class="list-group list-warning">...</ul>
<ul class="list-group list-danger">...</ul>
<ul class="list-group list-info">...</ul>

<ul class="list-group list-support1">...</ul>
<ul class="list-group list-support2">...</ul>
<ul class="list-group list-support3">...</ul>
<ul class="list-group list-support4">...</ul>
<ul class="list-group list-support5">...</ul>

<ul class="list-group list-black">...</ul>
<ul class="list-group list-white">...</ul>
<ul class="list-group list-gray">...</ul>
<ul class="list-group list-inverse">...</ul>
<ul class="list-group list-body">...</ul>

Comments list

Basics

The comments list is basically a .box element wrapped in an <ul> list with the class .list-comments.

Because the comments are wrapped inside a .box, you can use any .style-* class to color your comments.

Comments have additional classes to create different elements for the comment.
First there's the .comment-avatar class to contain the avatar. The avatar will be placed in front of the text. The avatar can be any icon or image you like.
Second there's the .comment-title class which has some modifications to the margins.

Example

  • Comment title 20/06/2013 at 4:02 pm

    Reply

    Etiam dui libero, tempor quis congue in, interdum eget tortor. Vivamus aliquam dictum lacus quis tincidunt. Phasellus rhoncus ante sollicitudin nisl consectetur ultricies. Sed rhoncus ullamcorper mauris, ac condimentum metus egestas ut. Nam et urna ante, vitae pretium lacus.

  • Comment title 20/06/2013 at 4:38 pm

    Reply

    Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ac magna lacinia velit bibendum ornare. Morbi eget dui lectus, eget eleifend mi.

<ul class="list-comments">
	<li>
		<div class="box style-body">
			<div class="comment-avatar"><i class="glyphicon glyphicon-user text-gray"></i></div>
			<div class="box-body">
				<h4 class="comment-title">Comment title <small>20/06/2013 at 4:02 pm</small></h4>
				<a class="btn btn-inverse stick-top-right" href="#">Reply</a>
				<p>...</p>
			</div>
		</div>
	</li>
	<li>
		<div class="box style-inverse">
			<div class="comment-avatar"><img class="img-circle" src="..." alt="" /></div>
			<div class="box-body">
				<h4 class="comment-title">Comment title <small>20/06/2013 at 4:38 pm</small></h4>
				<a class="btn btn-inverse stick-top-right" href="#">Reply</a>
				<p>...</p>
			</div>
		</div>
	</li>
</ul>

Replies

You can add a reply style by putting another <ul> list inside a <li> tag. This will add a vertical stripe which indicates it's a reply. You can nest as many as you want.

Example

  • Carol Sharp 20/06/2013 at 4:14 pm

    Reply

    Integer ac magna lacinia velit bibendum ornare. Morbi eget dui lectus, eget eleifend mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    • Amber Page 20/06/2013 at 4:41 pm

      Reply

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in tempus lorem. Vivamus ullamcorper leo risus, non vehicula odio.

<ul class="list-comments">
	<li>
		<div class="box style-body">...</div>
		<ul>
			<li>
				<div class="box style-body">...</div>
			</li>
		</ul>
	</li>
</ul>

Tags list

The .list-tags class is a very simple class. It creates an even gap horizontal and vertical between the buttons. This way it looks good when there are a lot of buttons.

Example
Wordpress Technology HTML5 Illustrator
Music CSS3 Video Photoshop jQuery 
<div class="list-tags">
	<a class="btn btn-xs btn-support1">Wordpress</a> 
	<a class="btn btn-xs btn-support1">Technology</a> 
	<a class="btn btn-xs btn-support1">HTML5</a> 
	<a class="btn btn-xs btn-support1">Illustrator</a>
	<br/>
	<a class="btn btn-xs btn-support1">Music</a> 
	<a class="btn btn-xs btn-support1">CSS3</a> 
	<a class="btn btn-xs btn-support1">Video</a> 
	<a class="btn btn-xs btn-support1">Photoshop</a> 
	<a class="btn btn-xs btn-support1">jQuery</a> 
</div>

Tabs

In addition to the standard Bootstrap tabs , Boostbox has several additional options.

Additional styles and behavior for this component are located in the following files
Component styles
boostbox/assets/less/boostbox/tabbar.less

General structure

Place the .nav-tabs in the .box-head. Add .tab-content to the .box-body, then place the .tab-pane inside the .box-body.

Example
1 ...
2 ...
3 ...
<div class="box">
	<div class="box-head">
		<ul class="nav nav-tabs" data-toggle="tabs">
			<li class="active"><a href="#home">Home</a></li>
			<li><a href="#about">About</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</div>
	<div class="box-body tab-content">
		<div class="tab-pane active" id="home">1 ...</div>
		<div class="tab-pane" id="about">2 ...</div>
		<div class="tab-pane" id="contact">3 ...</div>
	</div>
</div>

Tab pull right

If you add .pull-right to your .nav-tabs, you have room to add a <header>.

Example

Header

1 ...
2 ...
3 ...
<div class="box">
	<div class="box-head">
		<header>
			<h4 class="text-light">Header</h4>
		</header>
		<ul class="nav nav-tabs pull-right" data-toggle="tabs">
			...
		</ul>
	</div>
	...
</div>

Tab pull left

If you add .pull-left to your .nav-tabs, you have room to add .tools to the header.

Example
1 ...
2 ...
3 ...
<div class="box">
	<div class="box-head">
		<ul class="nav nav-tabs pull-left" data-toggle="tabs">
			...
		</ul>
		<div class="tools">
			...
		</div>
	</div>
	...
</div>

Tab positioning

If you want to position the tabs left, right or below your content, you have to add the <ul> tag directly to your .box. Then add .tabs-left, .tabs-right or .tabs-below to the .box class to position the tabs relative to their content.

If you use .tabs-below, place your <ul> below the main content.
Example

Daniel Johnson

Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Daniel Johnson

Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.

Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo

<div class="box tabs-left">
	<ul class="box-head nav nav-tabs" data-toggle="tabs">
		...
	</ul>
	<div class="box-body tab-content">
		<div class="tab-pane active" id="home">...</div>
		<div class="tab-pane" id="about">...</div>
		<div class="tab-pane" id="contact">...</div>
	</div>
</div><!--end .box -->

Tab colors

Use any of the available tab classes to create a colored tabbar.

Example












<ul class="nav nav-tabs tabs-primary" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-success" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-warning" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-danger" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-info" data-toggle="tabs">...</ul>

<ul class="nav nav-tabs tabs-black" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-inverse" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-gray" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-body" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-white" data-toggle="tabs">...</ul>

<ul class="nav nav-tabs tabs-support1" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-support2" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-support3" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-support4" data-toggle="tabs">...</ul>
<ul class="nav nav-tabs tabs-support5" data-toggle="tabs">...</ul>