"Simple Modular Responsive Header and footer"
Bootstrap 4.0.0 Snippet by imalitavakoli

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Modular Responsive Header and footer</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
</head>
<body>
<!--
CSS Utility classes (you may remove them from CSS as they don't harm the main functinality of the component):
Center an element
<div class="m-x-auto">...</div>
Remove margins from an element
.m-{a,t,r,b,l,x,y}-0
<div class="m-a-0">...</div>
Add 12px margins to an element
.m-{a,t,r,b,l,x,y}
<div class="m-a">...</div>
Remove paddings from an element
.p-{a,t,r,b,l,x,y}-0
<div class="p-a-0">...</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
/*
For a more professional header, footer, navigation, mega menu, and sidebar,
I recommend you to checkout this awesome jQuery plugin and CSS framework:
https://myflashlabs.github.io/24component-bars/
It lets you create almost any kind of bar fast and easy. Cheers!
*/
.pr {
margin: 0;
font-family: Arial, sans-serif;
}
.pr body {
margin: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
.m-a-0 {
margin: 0 !important;
}
.m-t-0 {
margin-top: 0 !important;
}
.m-r-0 {
margin-right: 0 !important;
}
.m-b-0 {
margin-bottom: 0 !important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
'use strict';
$('.s24-js-toggle').on('click.s24toggle', function (e) {
e.preventDefault();
var $target = $($(e.currentTarget).attr('data-target'));
$target.animate({ height: 'toggle' }, 300);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit Angular
Bootstrap 4 Footer Design
Simple Vertical timeline
Simple white navbar

Questions / Comments: