Skip to content

Column Classes

Sridhar Katakam edited this page Aug 23, 2017 · 2 revisions

Sample HTML for displaying items in columns is given below.

Browsers that support CSS Grid (Chrome, Firefox, Safari) uses the col and col-1 through col-6 classes to show the items in columns using CSS Grid. IE uses the Bootstrap's column classes that are added to the items.

Note: Bootstrap's column classes (the ones included in the theme) do not contain the CSS for five columns.

<h3>Two-Columns</h3>

<div class="col col-2">
	<div class="one-half first">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
	</div>
	<div class="one-half">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
	</div>
</div>

<hr />

<h3>Three-Columns</h3>

<div class="col col-3">
	<div class="one-third first">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
	</div>
	<div class="one-third">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
	</div>
	<div class="one-third">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
	</div>
</div>

<hr />

<h3>Four-Columns</h3>

<div class="col col-4">
	<div class="one-fourth first">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
	</div>
	<div class="one-fourth">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
	</div>
	<div class="one-fourth">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
	</div>
	<div class="one-fourth">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
	</div>
</div>

<hr />

<h3>Five-Columns</h3>

<div class="col col-5">
	<div>
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
	</div>
	<div>
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
	</div>
	<div>
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
	</div>
	<div>
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
	</div>
	<div>
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
	</div>
</div>

<hr />

<h3>Six-Columns</h3>

<div class="col col-6">
	<div class="one-sixth first">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
	</div>
	<div class="one-sixth">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
	</div>
	<div class="one-sixth">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
	</div>
	<div class="one-sixth">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
	</div>
	<div class="one-sixth">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
	</div>
	<div class="one-sixth">
		This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
	</div>
</div>
Clone this wiki locally