×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Customizing dropdown menu create by bootstrap Bootstrap Footer with copyright text and footer menu
Bootstrap Large Footer [ 3/4 columns footer ] - Bootstrap 3
6359    Arnab De    18/05/2017

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.

softetechnologies

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;
}

softetechnologies

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>

softetechnologies

#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;
}

Video Tutorials

Customizing dropdown menu create by bootstrap Bootstrap Footer with copyright text and footer menu
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Sri Sri Ramakrishna Paramahamsa
The world is needed a mixture of truth and make-believe. Discard the make-believe and take the truth.
Sri Sri Ramakrishna Paramahamsa
575
51.37
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     41662
01/01/2018     35880
28/06/2017     33905
25/06/2018     33093
02/08/2017     32257
06/07/2017     26687
01/08/2017     26673
15/05/2017     26298
14/07/2017     21663
21/04/2018     20589
softetechnologies