Sections

Wrap all your content in a <section> tag for consistent padding on all pages.

Basic example

By default, all the <section> does, is apply some basic border and padding to contain some content. The main content should be placed inside a <div> with the class .section-body.

<section>
	<div class="section-body">
		~ Section body content goes here ~
	</div>
</section>

Sections with heading

Easily add a heading container to your section with .section-header.

<section>
	<div class="section-header">
		~ Section header content goes here ~
	</div>
	<div class="section-body">
		~ Section body content goes here ~
	</div>
</section>

Coloring

By default, the sections will have a light gray background. If you add the class .body-white to your body, every section will have a white background. Add the class .body-striped to your body, and every odd number will be white. .body-striped-inverse will make every even number white.

The help sections have the .body-striped-inverse class applied to them.

Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Visit the Bootstrap documentation for a detailed help about the grid system.

Boxes

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

Basic example

The .box class adds by default padding to contain the content. When you add a style, for example .style-primary, the box will become visible.

<div class="box style-primary">
	<div class="box-body">
		Basic box sample
	</div>
</div>

Box with heading

Add a heading container to your box with .box-head. Place a <header> inside to contain your title.
Inside the <header> you can add your title directly or place it in <span>, <strong>, <em> or <h1> through <h6> tags.

<div class="box style-primary">
	<div class="box-head">
		<header>
			<h4>Box header</h4>
		</header>
	</div>
	<div class="box-body">
		Box content
	</div>
</div>

Styling options

Styling a .box is easy. You can put one of the .style-* classes on either the .box, .box-head or .box-body. There are 15 solid colors available.

<div class="box style-primary">...</div>
<div class="box style-success">...</div>
<div class="box style-warning">...</div>
<div class="box style-danger">...</div>
<div class="box style-info">...</div>
<div class="box style-black">...</div>
<div class="box style-white">...</div>
<div class="box style-gray">...</div>
<div class="box style-inverse">...</div>
<div class="box style-body">...</div>
<div class="box style-support1">...</div>
<div class="box style-support2">...</div>
<div class="box style-support3">...</div>
<div class="box style-support4">...</div>
<div class="box style-support5">...</div>

There are also 6 gradient colors available.

<div class="box style-primary-gradient">...</div>
<div class="box style-support1-gradient">...</div>
<div class="box style-support2-gradient">...</div>
<div class="box style-support3-gradient">...</div>
<div class="box style-support4-gradient">...</div>
<div class="box style-support5-gradient">...</div>

Styling individual parts

A .style-* class can be placed inside different parts of the .box.
You can choose to only place the .style-* class in either the .box-head or .box-body. By default the .box class has a white background, this will result in the 2 examples below.

<div class="box">
	<div class="box-header style-primary">
		...
	</div>
	<div class="box-body">
		...
	</div>
</div>

<div class="box">
	<div class="box-header">
		...
	</div>
	<div class="box-body style-primary">
		...
	</div>
</div>

You can create a flat colored box by placing the .style-* in .box (Example 3).
If you want your header to popout, place the .style-* class in both .box-head and .box-body (Example 4).

<div class="box style-primary">
	<div class="box-header">
		...
	</div>
	<div class="box-body">
		...
	</div>
</div>

<div class="box">
	<div class="box-header style-primary">
		...
	</div>
	<div class="box-body style-primary">
		...
	</div>
</div>

Underlined header

Want your header underlined? Simply add .box-underline.

<div class="box box-underline style-primary">
	...
</div>

Box with outlining

You can create a border around your box with .box-outlined. This will create a white background in your .box.

<div class="box box-outlined style-primary">
	...
</div>

Bordered box

By adding .box-bordered to your box, you will also create a border around your box. .box-bordered however, won't color the background white of the .box class. This way you can create the effect below.

<div class="box box-bordered style-primary">
	...
	<div class="box-body style-white">
		...
	</div>
</div>

Header sizes

The class .box-head can have 3 additional sizes, .box-head-xs, .box-head-xl and .box-head-xxl.

<div class="box-head box-head-xs">...</div>
<div class="box-head">...</div>
<div class="box-head box-head-xl">...</div>
<div class="box-head box-head-xxl">...</div>

Header tools

If you want buttons in your .box-head, you can use the .tools class. Place the .tools class in your .box-head after the <header>.

<div class="box-head">
	<header><h4>Box header</h4></header>
	<div class="tools">
		<div class="btn-group btn-group-transparent">
			<a class="btn btn-equal btn-sm btn-refresh"><i class="fa fa-refresh"></i></a>
			<a class="btn btn-equal btn-sm btn-collapse"><i class="fa fa-angle-down"></i></a>
			<a class="btn btn-equal btn-sm btn-close"><i class="fa fa-times"></i></a>
		</div>
	</div>
</div>

No padding

To remove the padding of an element inside a box, use the class .no-padding.

<div class="box">
	<div class="box-head">
		...
	</div>
	<div class="box-body no-padding">
		Box content
	</div>
</div>

Force padding

If you removed the padding, but want to add padding to certain elements, use the class .force-padding.

<div class="box">
	<div class="box-head">
		...
	</div>
	<div class="box-body force-padding">
		Box content
	</div>
</div>

Small padding

Use the class .small-padding to reduce the padding on .box elements by half.

<div class="box">
	<div class="box-head">
		...
	</div>
	<div class="box-body small-padding">
		Box content
	</div>
</div>

Typography

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

Font weight

Handy classes for different font weights. These classes can be used on any tag you want.

<h3 class="text-light">Font weight - light</h3>
<h3 class="text-standard">Font weight - standard</h3>
<h3 class="text-bold">Font weight - bold</h3>
<h3 class="text-bolder">Font weight - bolder</h3>
<h3 class="text-boldest">Font weight - boldest</h3>

Font sizes

If you want to change the font size of certain elements, you can use these size classes.

<span class="text-sm">Small</span>
<span class="text-lg">Large</span>
<span class="text-xl">X-Large</span>
<span class="text-xxl">XX-Large</span>
<span class="text-xxxl">XXX-Large</span>
<span class="text-huge">Huge</span>

Color options

Use any of the available text classes to quickly color your text. These classes can be used on any tag you want.

<strong class="text-primary-alt">Primary-alt</strong>
<strong class="text-inverse">Inverse</strong>
<strong class="text-inverse-alt">Inverse-alt</strong>
<strong class="text-gray">Gray</strong>
<strong class="text-gray-light">Gray-light</strong>
<strong class="text-gray-lighter">Gray-lighter</strong>
<strong class="text-white">White</strong>
<strong class="text-support1-alt">Support1-alt</strong>
<strong class="text-support2">Support2</strong>
<strong class="text-support2-alt">Support2-alt</strong>
<strong class="text-support3">Support3</strong>
<strong class="text-support3-alt">Support3-alt</strong>
<strong class="text-support4">Support4</strong>
<strong class="text-support4-alt">Support4-alt</strong>
<strong class="text-support5">Support5</strong>
<strong class="text-support5-alt">Support5-alt</strong>

Highlights

Highlights can be used to color the background of an inline tag like <span>, <strong>, <em> or <h1> through <h6>.

<span class="text-highlight-primary">Primary</span>
<span class="text-highlight-danger">Danger</span>
<span class="text-highlight-info">Info</span>
<span class="text-highlight-success">Success</span>
<span class="text-highlight-warning">Warning</span>
<span class="text-highlight-white">White</span>
<span class="text-highlight-black">Black</span>
<span class="text-highlight-gray">Gray</span>
<span class="text-highlight-inverse">Inverse</span>
<span class="text-highlight-support1">Support1</span>
<span class="text-highlight-support2">Support2</span>
<span class="text-highlight-support3">Support3</span>
<span class="text-highlight-support4">Support4</span>
<span class="text-highlight-support5">Support5</span>

Tables

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

Banded tables

Use .table-banded to add banded-striping to any table column within the <tbody>.

<table class="table table-banded">
	...
</table>

Table buttons

Use the .btn-xs in a .table row to create a button within the boundaries of the row height.

<td>
	<button type="button" class="btn btn-xs btn-default">Edit</button>
</td>

Forms

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

Horizontal banded form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Add .form-banded to apply a gray background color to the first column.

<form class="form-horizontal form-banded">
	<div class="form-group">
		<label for="inputEmail1" class="col-sm-2 control-label">Email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
		</div>
	</div>
	<div class="form-group">
		<label for="inputPassword1" class="col-sm-2 control-label">Password</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-2"></div>
		<div class="col-sm-10">
			<button type="submit" class="btn btn-default">Sign in</button>
		</div>
	</div>
</form>

Vertical striped form

Add .form-striped to generate stripes in your form.

<form class="form-vertical form-striped">
	<div class="form-group">
		<label for="email2">Email</label>
		<input type="email" name="email2" id="email2" class="form-control" placeholder="Email">
	</div>
	<div class="form-group">
		<label for="password2">Password</label>
		<input type="password" name="password2" id="password2" class="form-control" placeholder="Password">
	</div>
	<div class="form-group">
		<label>Checkboxes</label>
		<div class="checkbox">
			<label>
				<input type="checkbox" id="cb2"> Check me out
			</label>
		</div>
	</div>
	<div class="form-group">
		<button type="submit" class="btn btn-primary">Submit</button>
		<button type="submit" class="btn btn-default">Reset</button>
	</div>
</form>

Bordered form

Add .form-bordered to apply a border to your form. You can mix .form-bordered with .form-banded. The class .form-bordered also works on a .form-horizontal layout.

<form class="form-vertical form-bordered">
	...
</form>

Field info

You can add a subline to a label inside a horizontal formlayout. Just put your info inside a <small> tag that is placed inside your <label>.

<label class="col-sm-2 control-label">
	Label 
	<small>Field info</small>
</label>

Form footer

The class .form-footer can be used if you want to add your buttons below your form, without addition styling. It only adds some basic padding to align nicely with your form elements.

Form input width

Fancy a fixed size input? Choose one of the .control-width-* classes for different sizing.

<input type="text" class="form-control control-width-tiny" value="tiny"><br>
<input type="text" class="form-control control-width-mini" value="mini"><br>
<input type="text" class="form-control control-width-small" value="small"><br>
<input type="text" class="form-control control-width-medium" value="medium"><br>
<input type="text" class="form-control control-width-normal" value="normal"><br>
<input type="text" class="form-control control-width-large" value="large"><br>
<input type="text" class="form-control control-width-xlarge" value="xlarge"><br>
<input type="text" class="form-control control-width-xxlarge" value="xxlarge">

Form textarea heights

Use .control-*-rows to create different heights on a <textarea>.

<textarea class="form-control control-2-rows">2 rows</textarea><br>
<textarea class="form-control control-3-rows">3 rows</textarea><br>
<textarea class="form-control control-4-rows">4 rows</textarea><br>
<textarea class="form-control control-5-rows">5 rows</textarea><br>
<textarea class="form-control control-6-rows">6 rows</textarea><br>
<textarea class="form-control control-7-rows">7 rows</textarea><br>
<textarea class="form-control control-8-rows">9 rows</textarea><br>
<textarea class="form-control control-10-rows">10 rows</textarea><br>
<textarea class="form-control control-11-rows">11 rows</textarea><br>
<textarea class="form-control control-12-rows">12 rows</textarea><br>

Buttons

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

Options

Use any of the available button classes to quickly create a styled button.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-inverse">Inverse</button>
<button type="button" class="btn btn-support1">Support 1</button>
<button type="button" class="btn btn-support2">Support 2</button>
<button type="button" class="btn btn-support3">Support 3</button>
<button type="button" class="btn btn-support4">Support 4</button>
<button type="button" class="btn btn-support5">Support 5</button>
<button type="button" class="btn btn-transparent">transparent</button>

Button styles

The .btn class has some additional styles. To create a rounded button, add .btn-rounded.
If you want your button to be outlined, you can add .btn-outline. Of course you can combine these styles.

<button type="button" class="btn btn-primary">Basic button</button>
<button type="button" class="btn btn-primary btn-rounded">Rounded button</button>
<button type="button" class="btn btn-primary btn-outline">Outlined button</button>
<button type="button" class="btn btn-primary btn-outline btn-rounded">Rounded outlined button</button>

Proportional button

Sometimes you want your buttons to be proportional. If you only want to add an icon, it's much better looking when your button is even in width and height.
To achieve this, you only have to add .btn-equal.

<button type="button" class="btn btn-equal btn-primary"><i class="fa fa-rocket"></i></button>
<button type="button" class="btn btn-equal btn-primary btn-rounded"><i class="fa fa-rocket"></i></button>
<button type="button" class="btn btn-equal btn-primary btn-outline"><i class="fa fa-rocket"></i></button>
<button type="button" class="btn btn-equal btn-primary btn-outline btn-rounded"><i class="fa fa-rocket"></i></button>

Button labels

If you want to display a .label on your button, you just have to add a .btn-labeled class to your .btn.

<a href="#" class="btn btn-primary btn-labeled">
	Button
	<span class="label label-warning">12</span> 
</a>
		
<a href="#" class="btn btn-primary btn-rounded btn-equal btn-labeled">
	<i class="fa fa-rocket"></i>
	<span class="label label-warning">12</span> 
</a>

Images

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

Backdrop

The class .img-backdrop scales the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.
To create a backdrop image, give a <div> tag the class .img-backdrop and set the background-image in css.

<div class="img-backdrop" style="background-image: url('../assets/img/img1.jpg')"></div>

Helper classes

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

Dimensions

Use 1 of the following dimension classes to quickly define a width, height or width and height for your element. The width and height are incremented with 37.1428px.

	<div class="height-1"></div>  <!-- height: 37px -->
	<div class="height-2"></div>  <!-- height: 74px -->
	<div class="height-3"></div>  <!-- height: 111px -->
	<div class="height-4"></div>  <!-- height: 148px -->
	<div class="height-5"></div>  <!-- height: 185px -->
	<div class="height-6"></div>  <!-- height: 222px -->
	<div class="height-7"></div>  <!-- height: 260px -->
	<div class="height-8"></div>  <!-- height: 297px -->
	<div class="height-9"></div>  <!-- height: 334px -->
	<div class="height-10"></div> <!-- height: 371px -->
	<div class="height-11"></div> <!-- height: 408px -->
	<div class="height-12"></div> <!-- height: 445px -->
	
	<div class="width-1"></div>  <!-- width: 37px -->
	<div class="width-2"></div>  <!-- width: 74px -->
	<div class="width-3"></div>  <!-- width: 111px -->
	<div class="width-4"></div>  <!-- width: 148px -->
	<div class="width-5"></div>  <!-- width: 185px -->
	<div class="width-6"></div>  <!-- width: 222px -->
	<div class="width-7"></div>  <!-- width: 260px -->
	<div class="width-8"></div>  <!-- width: 297px -->
	<div class="width-9"></div>  <!-- width: 334px -->
	<div class="width-10"></div> <!-- width: 371px -->
	<div class="width-11"></div> <!-- width: 408px -->
	<div class="width-12"></div> <!-- width: 445px -->
	
	<div class="size-1"></div>  <!-- width & height: 37px -->
	<div class="size-2"></div>  <!-- width & height: 74px -->
	<div class="size-3"></div>  <!-- width & height: 111px -->
	<div class="size-4"></div>  <!-- width & height: 148px -->
	<div class="size-5"></div>  <!-- width & height: 185px -->
	<div class="size-6"></div>  <!-- width & height: 222px -->
	<div class="size-7"></div>  <!-- width & height: 260px -->
	<div class="size-8"></div>  <!-- width & height: 297px -->
	<div class="size-9"></div>  <!-- width & height: 334px -->
	<div class="size-10"></div> <!-- width & height: 371px -->
	<div class="size-11"></div> <!-- width & height: 408px -->
	<div class="size-12"></div> <!-- width & height: 445px -->

Containment

You can contain the width of an element by setting one of the containment classes. Your element will be centered on screen.
For example, if you use the class .contain-lg on an element, its max-width will be 1200px. When your screen is smaller than 1200px, it will be 100% wide. These help files also use the class .contain-lg.

	<div class="contain-xs"></div> <!-- max-width: 480px -->
	<div class="contain-sm"></div> <!-- max-width: 768px -->
	<div class="contain-md"></div> <!-- max-width: 992px -->
	<div class="contain-lg"></div> <!-- max-width: 1200px -->

Opacity

Use any of the available opacity classes to change the opacity of an element.

<h2>100% opacity</h2>
<h2 class="opacity-75">75% opacity</h2>
<h2 class="opacity-50">50% opacity</h2>
<h2 class="opacity-25">25% opacity</h2>

Sticking

Sticking an element to a corner is easy with one of the sticking classes. The element that needs to containing these sticking classes, should have a position applied to it. You can use the class .holder to contain the sticking classes.

<div class="holder height-4">
	<a class="btn btn-primary stick-top-left">Stick top left</a>
	<a class="btn btn-primary stick-top-right">Stick top right</a>
	<a class="btn btn-primary stick-bottom-left">Stick bottom left</a>
	<a class="btn btn-primary stick-bottom-right">Stick bottom right</a>
</div>

No margin

To remove the margin of an element, use the class .no-margin.

<div class="no-margin">
	...
</div>

No linebreak

To avoid text from breaking, add the .no-linebreak class.

<!-- .no-linebreak can be usen in every tag. Also in a <td> tag. -->
<td class="no-linebreak">
	$ 132,093,090.98
</td>

Masking

Placing the .mask class on a <div> and restricting its height, will mask everything inside. To control its content, place the object to be masked inside a .bottom-layer. This will expand the layer to be as large as the .mask. If you want, you can add a .top-layer. Everything inside the .top-layer will be placed on top inside the .mask.

<div class="mask height-3 text-center">
	<div class="bottom-layer">
		<span class="text-primary-alt text-bold text-huge">MASKED TEXT</span>
	</div>
	<div class="top-layer">
		<br/>
		<span class="text-xxxl text-inverse">Text overlay</span>
	</div>
</div>