Help

Please select a template from top right dropdown box, to see some examples!

Also refer to documentation for more info!

Use .row and .col-sm-* to have multiple columns inside a row which will be stacked on top of each other in small devices.
If you add .sm-border class to .row, there will be a border separating stacked columns on small devices.
You can also use a single .col class for less padding.
.row element can have .padding-* class for different content padding values.
If you use this, the paddings will be fixed and won't be changed on smaller screens:

<div class="row padding-12"></div>

Use .margin-* class on .row to specify spacing between its columns.

Use .clearfix and .pull-left or .pull-right classes to have a table with multiple rows and columns which won't be stacked.

Use .navbar class for a navbar which has 100% width.

Use .space-*, .break-* and .hr-* classes for spacing or horizontal lines.
For example .break-12 adds a 12px space with body background color
and .space-12 adds a 12px space with content background color.
For .hr-* you can also add the optional
.padding-* to add padding from sides.

For each of the above classes (.row, .clearfix, .navbar, .space-*, .hr-*) you can use inline styles to override background color:
<div class="space-12" style="background-color: #FF0000;"></div>

Add .pull-left, .pull-right class to img elements
to make them automatically float to right or left on small devices.

You can use some classes to style your email. The following classes can be used:

Alerts, such as .alert-info, etc ...

Background classes such as .bg-primary, etc ...

Wells, such as .well, .well-sm

Text colors and styles such as .blue.red.text-info.bigger-110, etc ...