Business Identity was designed with a grid that has 12 columns and 11 gutters. Each grid is 70 pixels wide (max) and each gutter is 30 pixels wide (max). The maximum width that will be occupied by the theme content in Desktop views is 1170 pixels. In mobile views the grid will collapse and all columns will be set to 100%. Resize your browser now to see the Business Identity grid in action.

Example

The following example shows the grid that Business Identity uses for the Features and Services section and for the entire theme itself, as well as the grid that you can also use within your posts and pages.

Mobile-Ready and Responsive

Business Identity was built from the ground up with a mobile-first appearance, which means that by using the theme your website will look beautiful on smartphones, tablets, and desktop computers alike.

Around-the-Clock Support

We’re dedicated to making sure that your experience building a website with this theme is a great one. That’s why we provide around-the-cloud support for Business Identity and robust documentation for your most common questions.

Beautiful Home Page Template

First impressions matter, and we’ve made sure that your website is as striking as it is useful. Make your professional home on the web shine by taking advantage of Business Identity’s front page template.

Fully Customizable

Business Identity comes with three custom widget areas, two menus, a custom logo, custom color palettes, custom header uploads, and more. Rest assured that if you’d like full control over your website, you have it.

Tailored for Your Business Needs

Our goal with Business Identity was to help you get an information-rich, SEO-friendly, professional website up and running quickly and smoothly so that you can focus on what matters: running your business. It’s been specifically tailored for entrepreneurs.

And More…

Continue reading more about why our customers think that Business Identity is the best product for their small business and professional website needs.

Source Code

Here’s what the code of the above section looks like. Just copy/paste it and adapt it to your own needs:

[code language=”html”]
<div class="grid feats">
<div class="row">
<div class="four column">
<h3>Mobile-Ready and Responsive</h3>
<p>Business Identity was built from the ground up with a mobile-first appearance, which means that by using the theme your website will look beautiful on smartphones, tablets, and desktop computers alike.</p>
<h3>Around-the-Clock Support</h3>
<p>We’re dedicated to making sure that your experience building a website with this theme is a great one. That’s why we provide around-the-cloud support for Business Identity and robust <a title="Business Identity Documentation" href="#">documentation</a> for your most common questions.</p>
</div>
<div class="four column">
<h3>Beautiful Home Page Template</h3>
<p>First impressions matter, and we’ve made sure that your website is as striking as it is useful. Make your professional home on the web shine by taking advantage of Business Identity’s <a title="Front Page Template" href="#">front page template</a>.</p>
<h3>Fully Customizable</h3>
<p>Business Identity comes with three custom widget areas, two menus, a custom logo, custom color palettes, custom header uploads, and more. Rest assured that if you’d like full control over your website, you have it.</p>
</div>
<div class="four column">
<h3>Tailored for Your Business Needs</h3>
<p>Our goal with Business Identity was to help you get an information-rich, SEO-friendly, professional website <a title="Quick Start Guide" href="#">up and running quickly</a> and smoothly so that you can focus on what matters: running your business. It’s been specifically tailored for entrepreneurs.</p>
<h3>And More…</h3>
<p><a title="Why do people use Business Identity?" href="#">Continue reading more</a> about why our customers think that Business Identity is the best product for their small business and professional website needs.</p>
</div>
</div>
</div>

[/code]

Grid Unit Tests

Twelve

Six
Six

Four
Four
Four

Three
Three
Three
Three

Two
Two
Two
Two
Two
Two

One
One
One
One
One
One
One
One
One
One
One
One

Twelve

Eleven
One

Ten
Two

Nine
Three

Eight
Four

Seven
Five

Six
Six

Five
Seven

Four
Eight

Three
Nine

Two
Ten

One
Eleven

Twelve

Source Code

If you would like to take advantage of the grid within your own posts or pages, then use the following HTML template as your guide:

Twelve:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="twelve column">
Twelve
</div>
</div>
</div>
[/code]

Sixes:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="six column">
Six
</div>
<div class="six column">
Six
</div>
</div>
</div>
[/code]

Fours:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="four column">
Four
</div>
<div class="four column">
Four
</div>
<div class="four column">
Four
</div>
</div>
</div>
[/code]

Threes:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="three column">
Three
</div>
<div class="three column">
Three
</div>
<div class="three column">
Three
</div>
<div class="three column">
Three
</div>
</div>
</div>
[/code]

Twos:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="two column">
Two
</div>
<div class="two column">
Two
</div>
<div class="two column">
Two
</div>
<div class="two column">
Two
</div>
<div class="two column">
Two
</div>
<div class="two column">
Two
</div>
</div>
</div>
[/code]

Ones:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
</div>
</div>
[/code]

Twelve:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="twelve column">
Twelve
</div>
</div>
</div>
[/code]

Eleven and One:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="eleven column">
Eleven
</div>
<div class="one column">
One
</div>
</div>
</div>
[/code]

Ten and Two:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="ten column">
Ten
</div>
<div class="two column">
Two
</div>
</div>
</div>
[/code]

Nine and Three:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="nine column">
Nine
</div>
<div class="three column">
Three
</div>
</div>
</div>
[/code]

Eight and Four:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="eight column">
Eight
</div>
<div class="four column">
Four
</div>
</div>
</div>
[/code]

Seven and Five:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="seven column">
Seven
</div>
<div class="five column">
Five
</div>
</div>
</div>
[/code]

Six and Six:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="six column">
Six
</div>
<div class="six column">
Six
</div>
</div>
</div>
[/code]

Five and Seven:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="five column">
Five
</div>
<div class="seven column">
Seven
</div>
</div>
</div>
[/code]

Four and Eight:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="four column">
Four
</div>
<div class="eight column">
Eight
</div>
</div>
</div>
[/code]

Three and Nine:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="three column">
Three
</div>
<div class="nine column">
Nine
</div>
</div>
</div>
[/code]

Two and Ten:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="two column">
Two
</div>
<div class="ten column">
Ten
</div>
</div>
</div>
[/code]

One and Eleven:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="one column">
One
</div>
<div class="eleven column">
Eleven
</div>
</div>
</div>
[/code]

Twelve:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="twelve column">
Twelve
</div>
</div>
</div>
[/code]