Fancy Some Columns?

Some Premium WordPress themes feature multi-column text entries, which is quite important for academics and engineers like myself for content presentation. HMFAYSAL OMEGA is the first Jekyll Theme to showcase multi-column text entries. HMFAYSAL OMEGA features four types of multi-column configuration, the first being the single column, the others are two, three and four columns. To insert a two-column text entry, simply enter this markup:

<div class="col-md-6">  
<p class="lead">Some Content Here for Column One</p>  
</div>  

<div class="col-md-6">  
<p class="lead">Some Content Here for Column Two</p>  
</div>
<br>

Which results in two columns with your content and looks like the following:

For three-column text entry, simply enter this markup:

<div class="col-md-4">  
<p class="lead">Some Content Here for Column One</p>  
</div>  

<div class="col-md-4">  
<p class="lead">Some Content Here for Column Two</p>  
</div>  

<div class="col-md-4">  
<p class="lead">Some Content Here for Column Three</p>  
</div> 
<br>  

Which results in three columns with your content and looks like the following:

For four-column text entry, simply enter this markup:

<div class="col-md-3">  
<p class="lead">Some Content Here for Column One</p>  
</div>  

<div class="col-md-3">  
<p class="lead">Some Content Here for Column One</p>  
</div>  

<div class="col-md-3">  
<p class="lead">Some Content Here for Column One</p>  
</div>  

<div class="col-md-3">  
<p class="lead">Some Content Here for Column One</p>  
</div>
<br>

Which results in four columns with your content and looks like the following:

You can also have multiple layouts.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean

For any layout, make sure in the <div class="col-md-#"> the "col-md-#" numbers add up to 12. the You can include any type of elements between the <div> tags, like texts, images, videos etc.

Tagged with sample post • columns

Search results