Bootstrap Snippet Simple Modular Responsive Header and footer using HTML CSS Bootstrap Javascript

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 ---------->
<!--
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>
Add 12px paddings to an element
.p-{a,t,r,b,l,x,y}
<div class="p-a">...</div>
Text alignment for 'extra small', 'small', 'medium', and 'large' screen sizes
.text-{xs,sm,md,lg}-{left,right,center}
<div class="text-xs-left">...</div>
Make an element to have 100% width
<div class="w-full" style="background-color: #eee;">...</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;
}
.m-l-0 {
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

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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