Please Note: This is an advanced feature. Implementing columns on your website will require some technical skill on your part or time with a paid consultant. Additional details below.

What does "advanced feature" mean?

When we say advanced, we're referring to the fact that users will need some basic HTML knowledge. If you're not afraid to dive into the page's source code or add a line or two of CSS, you should be fine. Just take your time working through this documentation.

Dividing content into two columns can be done by incorporating a "div" code into the content regions.

Common Uses

Columns can be helpful to make page content more digestible to the reader. Columns can also introduce content competition so it's important to use columns strategically.

Showcase a list of speakers, award winners, sponsors, etc with an image and text.
An 8-4 split works great to present copy on the left and a list of items (think past presidents, important dates, links, etc) on the right.
Present stats or information - a stylized grid is a great way to showcase a number or icon with short copy.

Adding A Div

Because your site is based on what is called a Twitter Bootstrap framework, it uses a “grid” of 12. You can think of this as just the total width of your columns.

So in order to achieve two columns, try using 6 and 6 for two equal columns, or 8 and 4 if you'd like the left column to be wider than the right. To keep it simple, just make sure your columns add up to 12.

For Advanced Users: For more custom grid combinations, visit Bootstrap’s website at http://getbootstrap.com/2.3.2/scaffolding.html.

To add a div to your page:

1. Begin by navigating to the page on the frontend and open the Source Code.

2. Find the content that needs to be entered in a grid and copy/paste the code below in that section, replacing the "CONTENT ON..." text with your actual content.

Code for 2 columns (with left column wider than right):

<div class="row" style="text-align: center;">
<div class="col-md-8">
<p>CONTENT PLACEHOLDER</p>

<p>CONTENT PLACEHOLDER</p>
</div>
<div class="col-md-4">
<p>CONTENT PLACEHOLDER</p>

<p>CONTENT PLACEHOLDER</p>
</div>
</div>

Code for 4 columns (equal widths):

<div class="row" style="text-align: center;">
<div class="col-md-3">
<p>CONTENT PLACEHOLDER</p>

<p>CONTENT PLACEHOLDER</p>
</div>
<div class="col-md-3">
<p>CONTENT PLACEHOLDER</p>

<p>CONTENT PLACEHOLDER</p>
</div>

<div class="col-md-3">
<p>CONTENT PLACEHOLDER</p>

<p>CONTENT PLACEHOLDER</p>
</div>

<div class="col-md-3">
<p>CONTENT PLACEHOLDER</p>

<p>CONTENT PLACEHOLDER</p>
</div>
</div>

>> See the section below for additional examples of code (e.g. 3 equal columns).

Are Divs Responsive?

Short answer: for the most part, yes. Getting a little technical: Bootstrap was built for responsive websites, so it will generally handle responsiveness for you. Column widths will be based on percentages, and divs should stack for mobile automatically. That said, if there is a lot of special formatting within your div, you could override that responsiveness. Therefore, it’s always a good idea to check your work at all breakpoints, including mobile.

Refer to the image below for an example of how div columns appear on a page:

Additional Examples

Code for 2 equal columns:

<div class="row" style="text-align: center;">
<div class="col-md-6">
CONTENT ON LEFT SIDE
</div>
<div class="col-md-6">
CONTENT ON RIGHT SIDE
</div>
</div>

Code for 3 equal columns:

CONTENT ON LEFT SIDE

</div>

CONTENT IN MIDDLE

</div>

CONTENT ON RIGHT SIDE

</div>

Code for 3 unequal columns:

CONTENT ON LEFT SIDE

</div>

CONTENT IN MIDDLE

</div>

CONTENT ON RIGHT SIDE

</div>