"Bootstrap 4 Single-page Layout"
Bootstrap 4.0.0 Snippet by blayderunner123

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 ---------->
<!-- jQuery Easing API -->
<body data-spy="scroll" data-target="#navbarResponsive" id="top" name="top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha256-gL1ibrbVcRIHKlCO5OXOPC/lZz/gpdApgQAzskqqXp8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">BS 4 <strong>My Resume</strong></a>
<div class="collapse navbar-collapse" id="navbarResponsive" name="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#resume">Resume <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#attributes">Attributes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#certifications">Certifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#clearance">Clearance</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experience">Experience</a>
</li>
<li class="nav-item">
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 */
*, *:before, *:after{
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
body{
width: 100%;
height: 100%;
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
overflow-x:hidden;
margin-top:55px;
position: relative;
}
html {
position: relative;
min-height: 100%;
width: 100%
}
h1,
h2,
h3,
h4,
h5,
h6{
margin: 0 0 35px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 800;
letter-spacing: 1px;
}
section{
padding-bottom:1%;
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
$(document).ready(function()
{
// Closes the sidebar menu on menu-close button click event
$("#menu-close").click(function(e) //declare the element event ...'(e)' = event (shorthand)
{
// - will not work otherwise")
$("#sidebar-wrapper").toggleClass("active"); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
/*!
======================= Notes ===============================
* see: .sidebar-wrapper.active in: style.css
==================== END Notes ==============================
*/
}); //Close 'function()'
// Open the Sidebar-wrapper on Hover
$("#menu-toggle").hover(function(e) //declare the element event ...'(e)' = event (shorthand)
{
$("#sidebar-wrapper").toggleClass("active",true); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
});
$("#menu-toggle").bind('click',function(e) //declare the element event ...'(e)' = event (shorthand)
{
$("#sidebar-wrapper").toggleClass("active",true); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
}); //Close 'function()'
$('#sidebar-wrapper').mouseleave(function(e) //declare the jQuery: mouseleave() event
// - see: ('//api.jquery.com/mouseleave/' for details)
{
/*! .toggleClass( className, state ) */
$('#sidebar-wrapper').toggleClass('active',false); /* toggleClass: Add or remove one or more classes from each element
in the set of matched elements, depending on either the class's
presence or the value of the state argument */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page
Creating password field text hide show via a single class
social network layout - bootstrap 4
Elegant Login Page

Questions / Comments: