phppe3/vendor/phppe/CMS/views/styleguide.tpl

<section data-id='jumbotron'>
	<div class='jumbotron'>
		<h1>Header</h1>
		<p>paragraph</p>
	</div>
</section>

<section data-id='jumbotron center'>
	<div class='jumbotron text-center'>
		<h1>Header</h1>
		<p>paragraph</p>
	</div>
</section>

<section data-id='page header'>
	<div class='page-header'>
		<h1>Header</h1>
	</div>
	<p class='lead'>Lead</p>
</section>

<section data-id='lead'>
	<p class='lead'>Lead</p>
</section>

<section data-id='lg 12'>
	<div class='row'>
		<div class='col-lg-12'>12</div>
	</div>
</section>

<section data-id='lg 6-6'>
	<div class='row'>
		<div class='col-lg-6'>6</div>
		<div class='col-lg-6'>6</div>
	</div>
</section>

<section data-id='lg 4-8'>
	<div class='row'>
		<div class='col-lg-4'>4</div>
		<div class='col-lg-8'>8</div>
	</div>
</section>

<section data-id='lg 8-4'>
	<div class='row'>
		<div class='col-lg-8'>8</div>
		<div class='col-lg-4'>4</div>
	</div>
</section>

<section data-id='lg 4-4-4'>
	<div class='row'>
		<div class='col-lg-4'>4</div>
		<div class='col-lg-4'>4</div>
		<div class='col-lg-4'>4</div>
	</div>
</section>

<section data-id='lg 3-3-3-3'>
	<div class='row'>
		<div class='col-lg-3'>3</div>
		<div class='col-lg-3'>3</div>
		<div class='col-lg-3'>3</div>
		<div class='col-lg-3'>3</div>
	</div>
</section>

<section data-id='lg 2-2-2-2-2-2'>
	<div class='row'>
		<div class='col-lg-2'>2</div>
		<div class='col-lg-2'>2</div>
		<div class='col-lg-2'>2</div>
		<div class='col-lg-2'>2</div>
		<div class='col-lg-2'>2</div>
		<div class='col-lg-2'>2</div>
	</div>
</section>

<section data-id='md 6-6'>
	<div class='row'>
		<div class='col-md-6'>6</div>
		<div class='col-md-6'>6</div>
	</div>
</section>

<section data-id='md 4-8'>
	<div class='row'>
		<div class='col-md-4'>4</div>
		<div class='col-md-8'>8</div>
	</div>
</section>

<section data-id='md 8-4'>
	<div class='row'>
		<div class='col-md-8'>8</div>
		<div class='col-md-4'>4</div>
	</div>
</section>

<section data-id='md 4-4-4'>
	<div class='row'>
		<div class='col-md-4'>4</div>
		<div class='col-md-4'>4</div>
		<div class='col-md-4'>4</div>
	</div>
</section>

<section data-id='md 3-3-3-3'>
	<div class='row'>
		<div class='col-md-3'>3</div>
		<div class='col-md-3'>3</div>
		<div class='col-md-3'>3</div>
		<div class='col-md-3'>3</div>
	</div>
</section>

<section data-id='md 2-2-2-2-2-2'>
	<div class='row'>
		<div class='col-md-2'>2</div>
		<div class='col-md-2'>2</div>
		<div class='col-md-2'>2</div>
		<div class='col-md-2'>2</div>
		<div class='col-md-2'>2</div>
		<div class='col-md-2'>2</div>
	</div>
</section>

<section data-id='sm 6-6'>
	<div class='row'>
		<div class='col-sm-6'>6</div>
		<div class='col-sm-6'>6</div>
	</div>
</section>

<section data-id='sm 4-8'>
	<div class='row'>
		<div class='col-sm-4'>4</div>
		<div class='col-sm-8'>8</div>
	</div>
</section>

<section data-id='sm 8-4'>
	<div class='row'>
		<div class='col-sm-8'>8</div>
		<div class='col-sm-4'>4</div>
	</div>
</section>

<section data-id='sm 4-4-4'>
	<div class='row'>
		<div class='col-sm-4'>4</div>
		<div class='col-sm-4'>4</div>
		<div class='col-sm-4'>4</div>
	</div>
</section>

<section data-id='sm 3-3-3-3'>
	<div class='row'>
		<div class='col-sm-3'>3</div>
		<div class='col-sm-3'>3</div>
		<div class='col-sm-3'>3</div>
		<div class='col-sm-3'>3</div>
	</div>
</section>

<section data-id='sm 2-2-2-2-2-2'>
	<div class='row'>
		<div class='col-sm-2'>2</div>
		<div class='col-sm-2'>2</div>
		<div class='col-sm-2'>2</div>
		<div class='col-sm-2'>2</div>
		<div class='col-sm-2'>2</div>
		<div class='col-sm-2'>2</div>
	</div>
</section>

<section data-id='xs 6-6'>
	<div class='row'>
		<div class='col-xs-6'>6</div>
		<div class='col-xs-6'>6</div>
	</div>
</section>

<section data-id='xs 4-8'>
	<div class='row'>
		<div class='col-xs-4'>4</div>
		<div class='col-xs-8'>8</div>
	</div>
</section>

<section data-id='xs 8-4'>
	<div class='row'>
		<div class='col-xs-8'>8</div>
		<div class='col-xs-4'>4</div>
	</div>
</section>

<section data-id='xs 4-4-4'>
	<div class='row'>
		<div class='col-xs-4'>4</div>
		<div class='col-xs-4'>4</div>
		<div class='col-xs-4'>4</div>
	</div>
</section>

<section data-id='xs 3-3-3-3'>
	<div class='row'>
		<div class='col-xs-3'>3</div>
		<div class='col-xs-3'>3</div>
		<div class='col-xs-3'>3</div>
		<div class='col-xs-3'>3</div>
	</div>
</section>

<section data-id='xs 2-2-2-2-2-2'>
	<div class='row'>
		<div class='col-xs-2'>2</div>
		<div class='col-xs-2'>2</div>
		<div class='col-xs-2'>2</div>
		<div class='col-xs-2'>2</div>
		<div class='col-xs-2'>2</div>
		<div class='col-xs-2'>2</div>
	</div>
</section>