"Custom header and footer bootstrap 4"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header>
<div class="top-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-header">
<div class="email">
<ul>
<li>
<a href="abc@gmail.com"><i class="fa fa-envelope" aria-hidden="true"></i> abc@gmail.com</a>
</li>
<li>
<a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> 124 kjk jhkh, MD 21224, USA</a>
</li>
</ul>
</div>
<div class="social-icon">
<ul>
<li>
<a href="#">
<i class="fa fa-facebook-square"></i>
<p>Facebook</p>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter"></i>
<p>Twitter</p>
</a>
</li>
<li>
<a href="#">
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
/* ==========================================================================
Global Styles
========================================================================== */
article,
aside,
details,
video,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
display: block;
}
html,
body {
width: 100%;
overflow-x: hidden !important;
}
body {
margin: 0;
background: #fff;
height: 100%;
font-family: "Cerebri Sans Pro";
}
ul li {
margin: 0;
padding: 0;
}
ul {
padding: 0;
margin: 0;
}
/* select {
-webkit-appearance: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
jQuery(document).ready(function () {
//mobile-click//
$("#configure").on("click", function (e) {
$("#configurator-wrap").toggleClass("hidden-xs");
e.preventDefault();
});
})(jQuery);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Coming Sssoon Page
Bootstrap 4 Footer Design
Custom Navbar Bootstrap 4
Footer using Bootstrap 4

Questions / Comments: