Grid system

Bojler uses 12-column grid with a 600px container.
On mobile devices (under 640px wide), columns become full width and stack vertically.

Typography Utility classes

Grid options

See how aspects of this grid work across devices with a handy table.

Small devices (<640px) Large devices (>640px)
Grid behaviour Horizontal Collapsed
Container width 100% 600px
Number of columns 12
Column width 100% 50px
Gutter width 20px (10px on each side of a column)

Container

All emails should have a container element. This gives the email a maximum width for email clients on larger screens. It also orients the email in the center.

<table class="container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            Content goes here ...
        </td>
    </tr>
</table><!-- /.container -->

Columns

Content should be placed within columns, and columns should be placed as <td> of your .container. You can define width of the column with classes such as .column-1, .column-2, .column-3 etc. In .container you can place max. 12 columns.

<table class="container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="column-12 first last">
            Content goes here ...
        </td><!-- /.col -->
    </tr>
</table><!-- /.container -->
<table class="container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="column-6 first">
            Content goes here ...
        </td><!-- /.col -->
        <td class="column-6 last">
            Content goes here ...
        </td><!-- /.col -->
    </tr>
</table><!-- /.container -->
<table class="container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="column-3 first">
            Content goes here ...
        </td><!-- /.col -->
        <td class="column-3">
            Content goes here ...
        </td><!-- /.col -->
        <td class="column-3">
            Content goes here ...
        </td><!-- /.col -->
        <td class="column-3 last">
            Content goes here ...
        </td><!-- /.col -->
    </tr>
</table><!-- /.container -->

First and last classes

The .first class adds the appropriate amount of padding-left to space the content away from the container’s edge. The .last class is added to your last set of columns in a row to add padding-right to the column. If you have columns in between .first and .last, these classes are not needed on the middle columns.

The reason these classes exist is that CSS properties like :last-child don’t work in most email clients so a class is needed.

<table class="container" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="column-4 first">
            Content goes here ...
        </td><!-- /.col -->
        <td class="column-4">
            Content goes here ...
        </td><!-- /.col -->
        <td class="column-4 last">
            Content goes here ...
        </td><!-- /.col -->
    </tr>
</table><!-- /.container -->

Columns without gutter

If you need columns without gutter than you should use .no-gutter class on your .container.

<table class="container no-gutter" width="600" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="column-6">
            Content goes here ...
        </td><!-- /.col -->
        <td class="column-6">
            Content goes here ...
        </td><!-- /.col -->
    </tr>
</table><!-- /.container -->

Don't use .first and .last classes Don't use .first and .last classes in combination with .no-gutter class, otherwise you'll have problem with unexpected paddings.