Marilyn Perry's Bootstrap Responsive Text Columns Cheatsheet

3
min read
A- A+
read

Marilyn Perry's Bootstrap Responsive Text Columns Cheatsheet

Software Utilities

Bootstrap Responsive Multi-Column Text Layout Cheatsheet

Marilyn Perry's Bootstrap Responsive Text Columns Cheatsheet
Photo Credit

getbootstrap.com

Bootstrap Responsive Text Column HTML Code Examples

Responsive Text Columns, including multiple column layouts are a snap to create with the Bootstrap responsive website layout JavaScript library. The Bootstrap responsive website layout JavaScript library makes creating multi-column text is as easy as the examples below demonstrate.

Columns

One Half

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

One Half

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

<div class="row">
<div class="col-md-6">
<h4>One Half</h4>
<p>Donec sed odio dui...</p>
</div> 
<div class="col-md-6"> 
<h4>One Half</h4>
<p>Donec sed odio dui...</p>
</div> 
</div>

 

One Third

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.

One Third

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.

One Third

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis.

 

<div class="row">
<div class="col-md-4"> 
<h4>One Third</h4>
<p>Donec sed odio dui..</p>
</div> 
<div class="col-md-4"> 
<h4>One Third</h4>
<p>Donec sed odio dui..</p>
</div> 
<div class="col-md-4"> 
<h4>One Third</h4>
<p>Donec sed odio dui..</p>
</div>
</div>

 

One Fourth

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut.

One Fourth

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut.

One Fourth

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut.

One Fourth

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut.

 

<div class="row">
<div class="col-md-3"> 
<h4>One Fourth</h4>
<p>Donec sed odio dui..</p>
</div> 
<div class="col-md-3"> 
<h4>One Fourth</h4>
<p>Donec sed odio dui..</p>
</div> 
<div class="col-md-3"> 
<h4>One Fourth</h4>
<p>Donec sed odio dui..</p>
</div>
<div class="col-md-3"> 
<h4>One Fourth</h4>
<p>Donec sed odio dui..</p>
</div>
</div>

 

One Third

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut. Lorem ipsum dolor sit amet, consectetur adipisicing.

Two Thirds

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, doloribus, tempora, numquam repellendus maiores facere a atque reiciendis voluptatibus hic veritatis ratione reprehenderit.

 

<div class="row">
<div class="col-md-4"> 
<h4>One Third</h4>
<p>Donec sed odio dui...</p>
</div> 
<div class="col-md-8"> 
<h4>Two Thirds</h4>
<p>Donec sed odio dui...</p>
</div> 
</div>

 

Two Thirds

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, doloribus, tempora, numquam repellendus maiores facere a atque reiciendis voluptatibus hic veritatis ratione reprehenderit.

One Third

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut. Lorem ipsum dolor sit amet, consectetur adipisicing.

 

<div class="row">
<div class="col-md-8"> 
<h4>Two Thirds</h4>
<p>Donec sed odio dui...</p>
</div> 
<div class="col-md-4"> 
<h4>One Third/h4>
<p>Donec sed odio dui...</p>
</div> 
</div>

 

One Fourth

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut.

Three Fourths

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, doloribus, tempora, numquam repellendus maiores facere a atque reiciendis voluptatibus hic veritatis ratione reprehenderit.

 

<div class="row">
<div class="col-md-3"> 
<h4>One Fourth</h4>
<p>Donec sed odio dui...</p>
</div> 
<div class="col-md-9"> 
<h4>Three Fourths</h4>
<p>Donec sed odio dui...</p>
</div> 
</div>

 

Three Fourths

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, doloribus, tempora, numquam repellendus maiores facere a atque reiciendis voluptatibus hic veritatis ratione reprehenderit.

One Fourth

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut.

 

<div class="row">
<div class="col-md-9"> 
<h4>Three Fourths</h4>
<p>Donec sed odio dui...</p>
</div>
<div class="col-md-3"> 
<h4>One Fourth</h4>
<p>Donec sed odio dui...</p>
</div> 
</div>

 

Thank you for visiting this website, my personal website, and hopefully your enjoyment the information and content shared here publicly at www.marilynperry.com. Marilyn Perry | Friday, April 5, 2024