Smarty Admin

GRID

Full Column

<div class="row">
	<div class="col-md-12">
		<h4>Full Column</h4>
	</div>
</div>

Half Column

Show Code

<div class="row">
	<div class="col-md-6">
		<h4>Half Column</h4>
	</div>

	<div class="col-md-6">
		<h4>Half Column</h4>
	</div>
</div>

Three Column

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Three Column

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Three Column

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Show Code

<div class="row">
	<div class="col-md-6">
		<h4>Three Column</h4>
	</div>

	<div class="col-md-6">
		<h4>Three Column</h4>
	</div>

	<div class="col-md-6">
		<h4>Three Column</h4>
	</div>
</div>

Four Columns

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Four Columns

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Four Columns

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Four Columns

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Show Code

<div class="row">
	<div class="col-md-3">
		<h4>Four Columns</h4>
	</div>

	<div class="col-md-3">
		<h4>Four Columns</h4>
	</div>

	<div class="col-md-3">
		<h4>Four Columns</h4>
	</div>

	<div class="col-md-3">
		<h4>Four Columns</h4>
	</div>
</div>

Five Columns

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Five Columns

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Five Columns

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Five Columns

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Five Columns

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.

Show Code

<div class="row">
	<div class="col-md-5th">
		<h4>Five Columns</h4>
	</div>

	<div class="col-md-5th">
		<h4>Five Columns</h4>
	</div>

	<div class="col-md-5th">
		<h4>Five Columns</h4>
	</div>

	<div class="col-md-5th">
		<h4>Five Columns</h4>
	</div>

	<div class="col-md-5th">
		<h4>Five Columns</h4>
	</div>
</div>

col-md-2

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat.

col-md-10

Show Code

<div class="row">
	<div class="col-md-2">
		<h4>col-md-2</h4>
	</div>

	<div class="col-md-10">
		<h4>col-md-10</h4>
	</div>
</div>

col-md-4

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat.

col-md-8

Show Code

<div class="row">
	<div class="col-md-4">
		<h4>col-md-4</h4>
	</div>

	<div class="col-md-8">
		<h4>col-md-8</h4>
	</div>
</div>

COLUMNIZE - NEWSPAPER STYLE [no extra code]

This is a nice way to columnize the text without changing the code or adding extra divs. The code will be automaticaly columnized by the CSS. Just add one o these classes: .columnize-2 , .columnize-3 , .columnize-4 , .columnize-5 or .columnize-6

Please Note: On <480px resolution, columnize will display only 2 columns max. On <768px resolution, columnize will display only 3 columns max.
You have no reason to worry, evrything is automaticaly calculated.

Columnize - 2 columns

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Integer posuere erat. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Show Code

<div class="columnize-2">
	Here is your long text waiting to be columnized
</div>

Columnize - 3 columns

Show Code

<div class="columnize-3">
	Here is your long text waiting to be columnized
</div>

Columnize - 4 columns

Show Code

<div class="columnize-4">
	Here is your long text waiting to be columnized
</div>

Columnize - 5 columns

Show Code

<div class="columnize-5">
	Here is your long text waiting to be columnized
</div>

Columnize - 6 columns

Show Code

<div class="columnize-6">
	Here is your long text waiting to be columnized
</div>