"Bootstrap Dark Footer UI"
Bootstrap 3.3.0 Snippet by sargbah84

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<section style="height:80px;"></section>
<div class="row" style="text-align:center;">
<h2>Bootstrap Dark Footer UI</h2>
</div>
<!----------- Footer ------------>
<footer class="footer-bs">
<div class="row">
<div class="col-md-3 footer-brand animated fadeInLeft">
<h2>Logo</h2>
<p>Suspendisse hendrerit tellus laoreet luctus pharetra. Aliquam porttitor vitae orci nec ultricies. Curabitur vehicula, libero eget faucibus faucibus, purus erat eleifend enim, porta pellentesque ex mi ut sem.</p>
<p>© 2014 BS3 UI Kit, All rights reserved</p>
</div>
<div class="col-md-4 footer-nav animated fadeInUp">
<h4>Menu —</h4>
<div class="col-md-6">
<ul class="pages">
<li><a href="#">Travel</a></li>
<li><a href="#">Nature</a></li>
<li><a href="#">Explores</a></li>
<li><a href="#">Science</a></li>
<li><a href="#">Advice</a></li>
</ul>
</div>
<div class="col-md-6">
<ul class="list">
<li><a href="#">About Us</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Terms & Condition</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.footer-bs {
background-color: #3c3d41;
padding: 60px 40px;
color: rgba(255,255,255,1.00);
margin-bottom: 20px;
border-bottom-right-radius: 6px;
border-top-left-radius: 0px;
border-bottom-left-radius: 6px;
}
.footer-bs .footer-brand, .footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns { padding:10px 25px; }
.footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns { border-color: transparent; }
.footer-bs .footer-brand h2 { margin:0px 0px 10px; }
.footer-bs .footer-brand p { font-size:12px; color:rgba(255,255,255,0.70); }
.footer-bs .footer-nav ul.pages { list-style:none; padding:0px; }
.footer-bs .footer-nav ul.pages li { padding:5px 0px;}
.footer-bs .footer-nav ul.pages a { color:rgba(255,255,255,1.00); font-weight:bold; text-transform:uppercase; }
.footer-bs .footer-nav ul.pages a:hover { color:rgba(255,255,255,0.80); text-decoration:none; }
.footer-bs .footer-nav h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom:10px;
}
.footer-bs .footer-nav ul.list { list-style:none; padding:0px; }
.footer-bs .footer-nav ul.list li { padding:5px 0px;}
.footer-bs .footer-nav ul.list a { color:rgba(255,255,255,0.80); }
.footer-bs .footer-nav ul.list a:hover { color:rgba(255,255,255,0.60); text-decoration:none; }
.footer-bs .footer-social ul { list-style:none; padding:0px; }
.footer-bs .footer-social h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
}
.footer-bs .footer-social li { padding:5px 4px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard Angular
Bootstrap 4 Footer Design
Footer using Bootstrap 4
Call to action with dark background

Questions / Comments:

Can i use it and delete your name Sir?

JonJaggerJack () - 6 years ago - Reply 0

You're most welcome to use this component anyway that suits your project. Thanks

sargbah84 () - 6 years ago - Reply 0

Thanks to you

JonJaggerJack () - 6 years ago - Reply 0

Olá

José Rodrigo () - 7 years ago - Reply 0