Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing a footer using bootstrap.

Objectives and Outcomes

In this, we will discuss about designing a footer using bootstrap.

Adding footer to the web page

Start by adding the following code to the body.

<footer>
        <div class="container row-footer">
            <div class="row row-footer">             
                
            </div>
        </div>
</footer>
output


Adding copyright to the footer

Start by adding the following code to the body.

<footer>
        <div class="container row-footer">
            <div class="row row-footer">             
                <div class="col-xs-12">
                    <p style="padding:10px;"></p>
                    <p align="center">© Copyright 2015 Ristorante Con Fusion</p>
                </div>
            </div>
        </div>
</footer>
output





Adding some links to the footer

Start by adding the following code to the body.

<footer>
        <div class="container row-footer">
            <div class="row row-footer"> 
	        <div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
                    <h5>Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="index.html#">Home</a></li>
                        <li><a href="index.html#">About</a></li>
                        <li><a href="index.html#">Menu</a></li>
                        <li><a href="index.html#">Contact</a></li>
                    </ul>
                </div>
                <div class="col-xs-12">
                    <p style="padding:10px;"></p>
                    <p align="center">© Copyright 2015 Ristorante Con Fusion</p>
                </div>
            </div>
        </div>
</footer>
output


Adding contact information to the footer

Start by adding the following code to the body.

<footer>
        <div class="container row-footer">
            <div class="row row-footer"> 
	        <div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
                    <h5>Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="index.html#">Home</a></li>
                        <li><a href="index.html#">About</a></li>
                        <li><a href="index.html#">Menu</a></li>
                        <li><a href="index.html#">Contact</a></li>
                    </ul>
                </div>
	        <div class="col-xs-6 col-sm-5">
                    <h5>Our Address</h5>
                    <address>
		              121, Clear Water Bay Road<br>
		              Clear Water Bay, Kowloon<br>
		              HONG KONG<br>
		              <i class="fa fa-phone"></i>: +852 1234 5678<br>
		              <i class="fa fa-fax"></i>: +852 8765 4321<br>
		              <i class="fa fa-envelope"></i>: <a href="confusion@food.net">confusion@food.net</a>
		    </address>
                </div>
                <div class="col-xs-12">
                    <p style="padding:10px;"></p>
                    <p align="center">© Copyright 2015 Ristorante Con Fusion</p>
                </div>
            </div>
        </div>
</footer>
output





Adding social icons in footer

Start by adding the following code to the body.

<footer>
        <div class="container row-footer">
            <div class="row row-footer"> 
	        <div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
                    <h5>Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="index.html#">Home</a></li>
                        <li><a href="index.html#">About</a></li>
                        <li><a href="index.html#">Menu</a></li>
                        <li><a href="index.html#">Contact</a></li>
                    </ul>
                </div>
	        <div class="col-xs-6 col-sm-5">
                    <h5>Our Address</h5>
                    <address>
		              121, Clear Water Bay Road<br>
		              Clear Water Bay, Kowloon<br>
		              HONG KONG<br>
		              <i class="fa fa-phone"></i>: +852 1234 5678<br>
		              <i class="fa fa-fax"></i>: +852 8765 4321<br>
		              <i class="fa fa-envelope"></i>: <a href="confusion@food.net">confusion@food.net</a>
		    </address>
                </div>
		<div class="col-xs-12 col-sm-4">
                    <div class="nav navbar-nav" style="padding: 40px 10px;">
                        <a class="btn btn-social-icon btn-google-plus" href=""><i class="fa fa-google-plus"></i></a>
                        <a class="btn btn-social-icon btn-facebook" href=""><i class="fa fa-facebook"></i></a>
                        <a class="btn btn-social-icon btn-linkedin" href=""><i class="fa fa-linkedin"></i></a>
                        <a class="btn btn-social-icon btn-twitter" href=""><i class="fa fa-twitter"></i></a>
                        <a class="btn btn-social-icon btn-youtube" href=""><i class="fa fa-youtube"></i></a>
                        <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
                    </div>
                </div>
                <div class="col-xs-12">
                    <p style="padding:10px;"></p>
                    <p align="center">© Copyright 2015 Ristorante Con Fusion</p>
                </div>
            </div>
        </div>
</footer>
output

Your footer is ready!!