Bootstrap Snippet Bootstrap 4 SPA using HTML CSS Bootstrap jQuery

/* 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%; } .row{ position:relative; } .row:first-child{ position: relative; margin-top:80px !important; } a:hover{ text-decoration:none; } /* BS4 CSS that seems not to work */ .float-xs-left { float: left!important } .float-xs-right { float: right!important } .float-xs-none { float: none!important } @media (min-width:576px) { .float-sm-left { float: left!important } .float-sm-right { float: right!important } .float-sm-none { float: none!important } } @media (min-width:768px) { .float-md-left { float: left!important } .float-md-right { float: right!important } .float-md-none { float: none!important } } @media (min-width:992px) { .float-lg-left { float: left!important } .float-lg-right { float: right!important } .float-lg-none { float: none!important } } @media (min-width:1200px) { .float-xl-left { float: left!important } .float-xl-right { float: right!important } .float-xl-none { float: none!important } } @-ms-viewport { width: device-width; } .navbar-fixed-top{ z-index:2000 !important; } .inactive-link { pointer-events: none; cursor: default; } .inactive-link:hover, .inactive-link:focus{ color: #555; text-decoration: none; background-color: #f5f5f5; } /* Sidebar Nav Styles */ #sidebar-wrapper { z-index: -1 !important; position: fixed; right: 0; width: 250px; height: 100%; margin-right: -250px; overflow-y: auto; background: #0275d8; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .sidebar-nav { position: absolute; top: 12%; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { position: relative; line-height: 20px; display: inline-block; width: 100%; font-size: 110%; font-weight: 800; text-transform: uppercase; outline: none; } .sidebar-nav li:before { content: ''; position: absolute; top: 0; right: 0; z-index: -1; height: 100%; width: 3px; /* background-color: #1c1c1c; */ -webkit-transition: width .4s ease-in-out; -moz-transition: width .4s ease-in-out; -ms-transition: width .4s ease-in-out; transition: width .4s ease-in-out; } .sidebar-nav li:first-child a { color: #fff; background-color: #1a1a1a !important; } .sidebar-nav li:nth-child(2):before { color: #fff; background-color: #1a1a1a !important; } .sidebar-nav li:nth-child(3):before { background-color: #ec1b5a !important; } .sidebar-nav li:nth-child(4):before { background-color: #79aefe !important; } .sidebar-nav li:nth-child(5):before { background-color: #314190; } .sidebar-nav li:nth-child(6):before { background-color: #279636; } .sidebar-nav li:nth-child(7):before { background-color: #7d5d81 !important; } .sidebar-nav li:nth-child(8):before { background-color: #ead24c; } .sidebar-nav li:nth-child(9):before { background-color: #2d2366 !important; } .sidebar-nav li:nth-child(10):before { background-color: #35acdf; } .sidebar-nav li:hover:before, .sidebar-nav li.open:hover:before { width: 100%; -webkit-transition: width .4s ease-in-out; -moz-transition: width .4s ease-in-out; -ms-transition: width .4s ease-in-out; transition: width .4s ease-in-out; } .sidebar-nav li a { display: block; color: #ddd; text-decoration: none; padding: 10px 15px 10px 30px; } .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus { color: #fff; text-decoration: none; background-color: transparent; } .sidebar-nav > .sidebar-brand { height: 44px; font-size: 18px; line-height: 1.43; } .sidebar-nav .dropdown-menu { position: relative; width: 100%; padding: 0; margin: 0; border-radius: 0; border: none; box-shadow: none; } #sidebar-wrapper.active { right: 250px; width: 250px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } /* Masthead (Header) */ .masthead{ display: table; position: relative; min-width: 100%; min-height: 100%; width: 100%; height: 100%; background: transparent url("https://soldierupdesigns.com/img/bg.jpg") no-repeat fixed 0px 0px / cover; z-index: 1000; background-color:#000; margin-left:auto; margin-right:auto; } /* Bootstrap 4 Carousel with Fade Captions Code snippet by Jonathan Adcox (Follow me on Twitter @soldierupdesign) for Bootsnipp.com Image credits: unsplash.com */ /* Bs Fade carousel */ .fade-carousel{ position: relative; height: 100vh; } .fade-carousel .carousel-inner .carousel-item{ height: 100vh; } .fade-carousel .carousel-indicators > li{ margin: 0 2px; background-color: #f39c12; border-color: #f39c12; opacity: .7; } .fade-carousel .carousel-indicators > li.active{ width: 10px; height: 10px; opacity: 1; } /* Carousel Captions */ .fade-carousel .carousel-inner .carousel-caption{ top: 50%; left: 50%; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .fade-carousel .carousel-inner .carousel-caption h1{ font-size:200%; font-weight: 800; margin: 0; padding: 0; } .fade-carousel .carousel-inner .carousel-caption{ opacity: 0; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } .fade-carousel .carousel-inner .active .carousel-caption { opacity: 1; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } /* Custom Buttons */ .btn.btn-lg { padding: 10px 40px; outline: none; margin: 20px auto; } .btn.btn-hero, .btn.btn-hero:hover, .btn.btn-hero:focus{ color: #f5f5f5; background-color: #1abc9c; border-color: #1abc9c; outline: none; margin: 20px auto; } /* Slides backgrounds */ .fade-carousel .carousel-inner .slide-1, .fade-carousel .carousel-inner .slide-2, .fade-carousel .carousel-inner .slide-3 { height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; } .fade-carousel .carousel-inner .slide-1 { background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818); } .fade-carousel .carousel-inner .slide-2 { background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af); } .fade-carousel .carousel-inner .slide-3 { background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327); } /* Bootstrap 4 Tabs Resume s Code snippet by Jonathan Adcox (Follow me on Twitter @soldierupdesign) for Bootsnipp.com Image credits: unsplash.com */ .bs-callout { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #eee; border-image: none; border-radius: 3px; border-style: solid; border-width: 1px 1px 1px 5px; margin-bottom: 5px; padding: 20px; width: 100%; } .bs-right-panel{ padding: 10px; width:100%; float:none; text-align:center; margin:0 auto; } .bs-right-panel img{ width:100%; margin:0; padding:0; } .bs-callout:last-child { margin-bottom: 0px; } .bs-callout h4, .bs-callout h5 { margin-bottom: 10px; margin-top: 5px; font-weight: 600; } .bs-callout-danger { border-left-color: #d9534f; } .bs-callout-danger h4, .bs-callout-danger h5{ color: #d9534f; } .header-title { color: #fff; } .title-thin { font-weight: 300; } .service-item { margin-bottom: 30px; } @media print { .no-print, .no-print * { display: none !important; visibility: hidden; } } .resume{ margin-bottom:28%; } .footer { background: #0c1a1e !important; min-height: 400px; font-family: 'Open Sans', sans-serif; position: absolute; margin-top: 10%; margin-bottom: 0; bottom: 0px; width: 100%; display: block; z-index: 5000; } .footer .container{ margin-bottom:2.5%; } .footerleft { margin-top: 50px; padding: 0 36px; } .logofooter { margin-bottom: 10px; font-size: 25px; color: #fff; font-weight: 700; } .footerleft p { color: #fff; font-size: 12px !important; font-family: 'Open Sans', sans-serif; margin-bottom: 15px; } .footerleft p i { width: 20px; color: #999; } .paddingtop-bottom { margin-top: 50px; } .footer-ul { list-style-type: none; padding-left: 0px; margin-left: 2px; display: block; } .footer-ul li { line-height: 29px; font-size: 12px; } .footer-ul li a { color: #a0a3a4; transition: color 0.2s linear 0s, background 0.2s linear 0s } .footer-ul i { margin-right: 10px; } .footer-ul li a:hover { transition: color 0.2s linear 0s, background 0.2s linear 0s; color: #ff670f; } .social:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); } .icon-ul { list-style-type: none !important; margin: 0px; padding: 0px; } .icon-ul li { line-height: 75px; width: 100%; float: left; } .icon { float: left; margin-right: 5px; } .copyright { min-height: 40px; background: #000000; } .copyright p { text-align: left; color: #FFF; padding: 10px 0; margin-bottom: 0px; } .heading7 { font-size: 21px; font-weight: 700; color: #d9d6d6; margin-bottom: 22px; } .post p { font-size: 12px; color: #FFF; line-height: 20px; } .post p span { display: block; color: #8f8f8f; } .bottom_ul { list-style-type: none; float: right; margin-bottom: 0px; } .bottom_ul li { float: left; line-height: 40px; display: inline-block; margin: 0px auto; } .bottom_ul li:after { content: "/"; color: #FFF; margin-right: 8px; margin-left: 8px; } .bottom_ul li a { color: #FFF; font-size: 12px; } .container-fluid, .container, footer, .footer header, .header, .nav, .resume{ z-index: 1; } .navbar-footer { position: absolute; margin-bottom: 0; bottom: 0px; width: 100%; display: block; }

$(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 */ e.stopPropagation(); //Prevents the event from bubbling up the DOM tree // - see: ('//api.jquery.com/event.stopPropagation/' for details) e.preventDefault(); // Prevent the default action of the event will not be triggered // - see: ('//api.jquery.com/event.preventDefault/' for details) }); }); !function ($) { $(function() { window.prettyPrint && prettyPrint() }) }(window.jQuery) console.log('FB code'); (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); $(document).ready(function() { $('body').scrollspy({ target: '#navbarResponsive' }); $(function() { $("a[href*=#]:not([href=#])").bind("click", function(t) { if (t.preventDefault(), t.stopPropagation(), location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") || location.hostname == this.hostname) { var e = $(this.hash); if (e = e.length ? e : $("[name=" + this.hash.slice(1) + "]"), e.length) return $("html,body").animate({ scrollTop: e.offset().top }, 2500, "easeInOutExpo"), !1 } }); }); $("[rel='tooltip']").tooltip(); });

"Bootstrap 4 SPA"
Bootstrap 4.0.0 Snippet by iToreTS

Related: See More

Questions / Comments:

"Bootstrap 4 SPA" Bootstrap 4.0.0 Snippet by iToreTS

Related: See More

Questions / Comments:

"Bootstrap 4 SPA"
Bootstrap 4.0.0 Snippet by iToreTS