COLUMNS / GRID

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

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

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

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

<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>

<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>

<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>

<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>

<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>

Text Columnize - Newspaper Style [Without 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

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

Columnize - 3 columns

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

Columnize - 4 columns

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

Columnize - 5 columns

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

Columnize - 6 columns

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