Footer example in CSS and bootstrap

December 22, 2020

0 683 4 minutes read

Before We Start

Every developer needs clean and modern elements to develop their websites, It contains pictures and a user interface element within a website. The most important one and the first section that the user sees when the user enters a website. Footer example in CSS and bootstrap

So if you are a person who wishes to develop a website, you have to know how to create that properly.

We are here to solve your problem. In this article we discuss how to create these elements. Before we start please read the below articles which easier you to understand the process, if you are new to development.

Step 1 – Add HTML

It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag.

 <!-- footer Section Begins -->
<section id="footer" class="footer">
<div class="footerBg"></div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="contact-form btm-brdr">
<div class="form-Box">
<input type="text" placeholder="Name" class="b_effect" />
 </div>
<div class="form-Box">
<input type="text" placeholder="Email" class="b_effect" />
</div>
<div class="form-Box">                              <textarea placeholder="Message" class="b_effect"></textarea>
</div>
<div class="form-Box">
<input type="submit" value="Submit" class="fill-btn" />
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="contact-address btm-brdr">
<h4 class="fTitle"> Contact <span>Us</span> </h4>
<ul>
<li> <i class="fa fa-phone" aria-hidden="true"></i> <span>1800 999 87 21</span> </li>
<li> <i class="fa fa-map-marker" aria-hidden="true"></i> <span>121 Abc St, Delhi VIC 5000, India</span> </li>
<li><i class="fa fa-envelope-o" aria-hidden="true"></i><span>info@scanfcode.com</span> 
                                </li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="subscribe btm-brdr">
<h4 class="fTitle"> Subscribe <span>Newsletter</span> </h4>
<form>
<input type="text" placeholder="Example@example.com" />                                <button type="button" class="fill-btn">Subscribe</button>
</form>
</div>
<div class="social-icons">
<h4 class="fTitle"> Social <span>News</span> </h4>
<ul>
<li>
<a href="'#" target="_blank"> <i class="fa fa-facebook" aria-hidden="true"></i> </a></li>
<li> <a href="'#" target="_blank"> <i class="fa fa-twitter" aria-hidden="true"></i> </a></li>
<li><a href="'#" target="_blank"> <i class="fa fa-youtube-play" aria-hidden="true"></i> </a></li>
<li><a href="'#" target="_blank"> <i class="fa fa-instagram" aria-hidden="true"></i> </a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- footer Section Ends -->
<!-- copyright Section Begins -->
<section id="copyright" class="copyright">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h6> © 2017 This theme is powered by <a href="#" target="_blank">w3schoolweb</a> </h6>
</div>
</div>
</div>
</section>
<!-- copyright Section Ends -->

Step 2 – Add CSS

Copy and paste below code in your HTML editor between <style></style> tag.

<style>
/*  Footer css */
.element-btn .element-fill-btn {
    background-color: #ff6600;
    border: 0;
    color: #fff;
    padding: 13px 5px;
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    width: 252px;
    margin: 0 auto;
    border-radius: 25px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    box-shadow: 0px 10px 50px -10px rgba(255, 10, 120, 1);
   
}
.fill-btn {
    background-color: #ff6600;
    border: 0;
    color: #fff;
    padding: 13px 5px;
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    width: 252px;
    margin: 0 auto;
    border-radius: 25px;
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
   
}
.fill-btn:hover,
.element-btn .element-fill-btn:hover {
    background-color: #201f1f;
    box-shadow: 0px 10px 50px -10px rgb(32, 31, 31);
}


.footer {
    position: relative;
    background-color: #201f1f;
    padding:50px 0px;
}

.footerBg {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0.13;
    background: url('http://placehold.it/1920x677') no-repeat top center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.form-Box input[type="text"],
.form-Box input[type="email"],
.form-Box input[type="passowrd"],
.form-Box textarea {
    width: 100%;
    height: 50px;
    border: 1px solid #737373;
    border-radius: 25px;
    background-color: transparent;
    padding: 5px 25px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #737373;
    font-style: italic;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
}
.form-Box textarea {
    height: 113px;
    padding: 15px 25px;
    resize: none;
}
.form-Box .b_effect:focus,
.subscribe form input:focus {
    border-color: #ff6600;
}

.form-Box .fill-btn {
    position: static;
    transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
    -moz-transform: translate(0%, 0);
    -ms-transform: translate(0%, 0);
    width: 184px;
}

.form-Box .fill-btn:hover,
.subscribe form .fill-btn:hover {
    background-color: #ffe402;
    color: #201f1f;
    box-shadow: 0px 10px 50px -10px rgb(255, 228, 2);
}

.fTitle {
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 20px;
}

.fTitle span {
    color: #ff6600;
}

.contact-address ul li,
.contact-address ul li a {
    color: #737373;
    font-size: 16px;
    font-style: italic;
    margin-bottom: 15px;
    line-height: 32px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.contact-address {
    padding: 0 15%;
}

.contact-address ul li i {
    margin-right: 15px;
    display: inline-block;
    float: left;
    line-height: 32px;
}

.contact-address ul li span {
    display: table;
}

.contact-address ul li a:hover {
    color: #ff6600;
}

.subscribe form {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 60px;
}

.subscribe form input {
    width: 100%;
    height: 50px;
    border: 1px solid #737373;
    border-radius: 25px;
    background-color: transparent;
    padding: 5px 215px 5px 25px;
    font-size: 14px;
    color: #737373;
    font-style: italic;
}

.subscribe form .fill-btn {
    bottom: auto;
    top: 0;
    right: 0;
    left: auto;
    transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
    -moz-transform: translate(0%, 0);
    -ms-transform: translate(0%, 0);
    width: 209px;
}

.social-icons ul li {
    display: inline-block;
    float: left;
    color: #fff;
    text-align: center;
    line-height: 43px;
    position: relative;
    width: 43px;
    height: 43px;
    margin-right: 28px;
}

.social-icons ul li a {
    color: #fff;
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 16px;
}

.social-icons ul li:before {
    content: "";
    width: 43px;
    height: 43px;
    display: inline-block;
    position: absolute;
    border: 1px solid #ff6600;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.social-icons ul li:last-child {
    margin: 0;
}

.social-icons ul li:hover:before {
    background: #ff6600;
}


/* Copyright css */

.copyright {
    padding: 51.5px 0;
    text-align: center;
}

.copyright h6 {
    font-size: 14px;
    font-style: italic;
    color: #737373;
}

.copyright h6 a {
    color: #ff6600;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.copyright h6 a:hover {
    color: #201f1f;
}

</style>

At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.

Udemy Free Courses

Web Development Courses 01

Web Development Courses 02

Your Output

Video Tutorial

Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.

Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.

December 22, 2020

0 683 4 minutes read