Bootstrap 3 column larger footer

Most of the modern web sites have a large footer for every page. Under the Topic Bootstrap Large Footer we demonstrate how we create different footer in different web site. Generally, this footer is consists two, three or four columns. We already know about the bootstrap column system. Those have total 12 equal width columns. Therefore if we want to create

1. 2 columns then we must create two columns of width 6. [6 * 2 =12]
2. 3 column then we must create three columns of width 4. [4 * 3 =12]
3. 4 column then we must create four columns of width 3. [3 * 4 =12]

N.B. we must download and placed the bootstrap.min.css file in the home folder.

Bootstrap Large Footer: 3 columns

<section id="upper-footer">
<!-- Three Column -->
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Heading 1</h3>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.</p>
</div>
<div class="col-md-4">
<h3>Heading 2</h3>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.</p>
</div>
<div class="col-md-4">
<h3>Heading 3</h3>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. </p>
</div>
</div>
</div>
</section>

#upper-footer
{
background-color: #aaa; 
min-height: 300px;
padding: 25px 0 25px 0;
}

#upper-footer h3
{
border-bottom: solid 4px #000;
padding-bottom: 5px;
width:100%;
}

#upper-footer p
{
text-align: justify;
}

Bootstrap Large Footer: 4 columns

 
<section id="upper-footer">

<!-- Four Column -->
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Heading 1</h3>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.</p>
</div>
<div class="col-md-3">
<h3>Heading 2</h3>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.</p>
</div>
<div class="col-md-3">
<h3>Heading 3</h3>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.</p>
</div>
<div class="col-md-3">
<h3>Heading 4</h3>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.</p>
</div>
</div>
</div>
</section>

#upper-footer
{
background-color: #aaa;
min-height: 300px;
padding: 25px 0 25px 0;
}

#upper-footer h3
{
border-bottom: solid 4px #000;
padding-bottom: 5px;
width:100%;
}

#upper-footer p
{
text-align: justify;
}