In-line Columns

I decided to provide you with some additional layout options by creating “Inline Columns” that extends your page style and layout further than with just modules. Inline columns are html snippets of code you copy & paste into your content editor and then change the demo content to your own. Morphology is responsive and is also using Bootstrap which is also based on a 12 grid layout which means your page content is split into 12 columns. The spans you see below are examples of using the grid layout by counting the columns for your column widths. So if your overall width is 12 columns, then span6 + span6 = 12 columns. You can get more layout possibilities than what you see on this page demo but it gives you an idea of creating inline columns within your pages.

 

Span 6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div class="row-fluid"> 
<div class="span6"> <h3><strong>One</strong> Half</h3>
<p>Add your own content here.</p> </div>
<div class="span6"> <h3><strong>One</strong> Half</h3>
<p>Add your own content here.</p> </div>
</div>

Span 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div class="row-fluid"> 
<div class="span4"> <h3><strong>Span</strong> 4</h3>
<p>Add your own content here.</p> </div>
<div class="span4"> <h3><strong>Span</strong> 4</h3>
<p>Add your own content here.</p> </div>
<div class="span4"> <h3><strong>Span</strong> 4</h3>
<p>Add your own content here.</p> </div>
</div>

Span 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div class="row-fluid"> 
<div class="span3"> <h3><strong>Span</strong> 3</h3>
<p>Add your own content here.</p> </div>
<div class="span3"> <h3><strong>Span</strong> 3</h3>
<p>Add your own content here.</p> </div>
<div class="span3"> <h3><strong>Span</strong> 3</h3>
<p>Add your own content here.</p> </div>
<div class="span3"> <h3><strong>Span</strong> 3</h3>
<p>Add your own content here.</p> </div> </div>

Span 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div class="row-fluid"> 
<div class="span2"> <h3><strong>Span</strong> 2</h3>
<p>Add your own content here.</p> </div>
<div class="span2"> <h3><strong>Span</strong> 2</h3>
<p>Add your own content here.</p> </div>
<div class="span2"> <h3><strong>Span</strong> 2</h3>
<p>Add your own content here.</p> </div>
<div class="span2"> <h3><strong>Span</strong> 2</h3>
<p>Add your own content here.</p> </div>
<div class="span2"> <h3><strong>Span</strong> 2</h3>
<p>Add your own content here.</p> </div>
<div class="span2"> <h3><strong>Span</strong> 2</h3>
<p>Add your own content here.</p> </div>
</div>

Span 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 8

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div class="row-fluid"> 
<div class="span4"> <h3><strong>Span</strong> 4</h3>
<p>Add your own content here.</p> </div>
<div class="span8"> <h3><strong>One</strong> 8</h3>
<p>Add your own content here.</p></div>
</div>

Span 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.

Span 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Span 6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text.

<div class="row-fluid"> 
<div class="span2"> <h3><strong>Span</strong> 2</h3>
<p>Add your own content here.</p> </div>
<div class="span4"> <h3><strong>Span</strong> 4</h3>
<p>Add your own content here.</p> </div>
<div class="span6"> <h3><strong>Span</strong> 6</h3>
<p>Add your own content here.</p> </div>
</div>