Bootstrap Snippet Test using HTML Bootstrap

"Test"
Bootstrap 4.0.0 Snippet by Purus

4.0.0

1.1K 0 Fav

Post to Facebook Tweet this

<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>  <body id="page-top" name="page-top" class="active"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">  <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid">  <div class="navbar-header"> <a class="nav-btn btn-dark btn-lg accordion-toggle pull-left" title="Follow Us" role="tab" id="social-collapse" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></a> <a id="menu-toggle" href="#" class="nav-btn btn-dark btn-lg toggle"> <i class="fa fa-bars" style="color:#fff;"></i> </a> <a id="to-top" class="btn btn-lg btn-inverse" href="#top"> <span class="sr-only">Toggle to Top Navigation</span> <i class="fa fa-chevron-up"></i> </a> </div>  <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav navbar-left"> <a class="navbar-brand" href="#"> <img height="20" width="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC" class="img-responsive pull-left" alt="Responsive image"> Bootstrap Custom Navbar</a> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Men <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Men Collection</li> <div id="menCollection" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> <h4><small>Summer dress floral prints</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> <h4><small>Gold sandals with shiny touch</small></h4> <button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> <h4><small>Denin jacket stamped</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> </div>  <a class="left carousel-control" href="#menCollection" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#menCollection" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <li class="divider"></li> <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Features</li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Carousel Control</a></li> <li><a href="#">Left & Right Navigation</a></li> <li><a href="#">Four Columns Grid</a></li> <li class="divider"></li> <li class="dropdown-header">Fonts</li> <li><a href="#">Glyphicon</a></li> <li><a href="#">Google Fonts</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Plus</li> <li><a href="#">Navbar Inverse</a></li> <li><a href="#">Pull Right Elements</a></li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Much more</li> <li><a href="#">Easy to Customize</a></li> <li><a href="#">Calls to action</a></li> <li><a href="#">Custom Fonts</a></li> <li><a href="#">Slide down on Hover</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Women <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Features</li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Carousel Control</a></li> <li><a href="#">Left & Right Navigation</a></li> <li><a href="#">Four Columns Grid</a></li> <li class="divider"></li> <li class="dropdown-header">Fonts</li> <li><a href="#">Glyphicon</a></li> <li><a href="#">Google Fonts</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Plus</li> <li><a href="#">Navbar Inverse</a></li> <li><a href="#">Pull Right Elements</a></li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Much more</li> <li><a href="#">Easy to Customize</a></li> <li><a href="#">Calls to action</a></li> <li><a href="#">Custom Fonts</a></li> <li><a href="#">Slide down on Hover</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Women Collection</li> <div id="womenCollection" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> <h4><small>Summer dress floral prints</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> <h4><small>Gold sandals with shiny touch</small></h4> <button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> <h4><small>Denin jacket stamped</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> </div>  <a class="left carousel-control" href="#womenCollection" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#womenCollection" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <li class="divider"></li> <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li> </ul> </li> </ul> </li> <li><a href="#">Store locator</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My account <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li><a href="#">My cart (0) items</a></li> </ul> </div> </div> </nav> <nav id="sidebar-wrapper"> <ul class="sidebar-nav"> <a id="menu-close" href="#" class="btn btn-danger pull-right hidden-md hidden-lg toggle"><i class="fa fa-times"></i></a> <li class="sidebar-brand"> <a href="#top">Soldier-up <strong>Designs</strong></a> </li> <li> <a href="/" title="Go to Top">Home</a> </li> <li> <a href="/about" title="Go to About Us section">About</a> </li> <li> <a href="/resume" title="Navigate to Jonathan Adcox IT Resume">Resume</a> </li> <li> <a href="/portfolio" title="Navigate to 'Our Services' section">Portfolio</a> </li>  <li> <a href="/blog" title="Our Blog">Blog</a> </li> <li> <a data-toggle="modal" data-href="#loginModal" data-target="#loginModal" style="cursor:pointer;"> Hosting</a> </li> </ul> </nav> <div class="container"> <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true"> <div class="modal-dialog modal-default"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Login to Hosting Portal - Control Panel</h3> </div> <div class="modal-body"> <article class="container-form center-block">  <form method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal" action="https://secure.yourwebhosting.com/secureLogin" enctype="application/x-www-form-urlencoded"> <fieldset> <input type='hidden' name='__token_timestamp__' value='1426572610'> <input type='hidden' name='__token_val__' value='4d96cad055fac46518825357fcb49390'> <input type="hidden" name="destination" value="http://www.yourwebhosting.com/controlpanel/index.bml">  <div class="form-group"> <label class="sr-only" for="credential_0">Username: </label> <div class="col-xs-12"> <input id="credential_0" name="credential_0" type="text" placeholder="Your Username" class="form-control"> </div> </div>  <div class="form-group"> <label class="sr-only" for="credential_1">Password: </label> <div class="col-xs-12"> <input id="email" type="password" name="credential_1" value="" placeholder="Your Password" class="form-control"> </div> </div>  <div class="form-group pull-right"> <div class="col-md-12 text-right"> <button type="submit" name="submit" value="Sign In" class="btn btn-lg">Submit</button> </div> </div> </fieldset> </form> </article> </div> <div class="modal-footer"> Login Problems? <button type="submit" class="btn btn-dark" data-dismiss="modal" data-href="#collapseTwo" data-toggle="collapse" data-target="#collapseTwo" style="cursor:pointer;">Contact Me</button> </div> </div> </div> </div> </div> <aside id="accordion" class="social text-vertical-center"> <div class="accordion-social"> <ul class="panel-collapse collapse in nav nav-stacked" role="tabpanel" aria-labelledby="social-collapse" id="collapseOne"> <li><a href="https://www.facebook.com/soldierupdesigns" target="_blank"><i class="fa fa-lg fa-facebook"></i></a></li> <li><a href="https://twitter.com/soldierupdesign" target="_blank"><i class="fa fa-lg fa-twitter"></i></a></li> <li><a href="https://www.plus.google.com/+soldierupdesigns" target="_blank"><i class="fa fa-lg fa-google-plus"></i></a></li> <li><a href="https://github.com/blayderunner123" target="_blank"><i class="fa fa-lg fa-github"></i></a></li> <li><a href="https://linkedin.com/in/blayderunner123" target="_blank"><i class="fa fa-lg fa-linkedin"></i></a></li> <li><a href="skype:live:soldierupdesigns?call"><i class="fa fa-lg fa-skype" target="_blank"></i></a></li> <li><a href="http://stackexchange.com/users/4992378/blayderunner123" target="_blank"><i class="fa fa-lg fa-stack-exchange"></i></a></li> </ul> </div> </aside> <div class="masthead"> <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">  <ol class="carousel-indicators"> <li data-target="#bs-carousel" data-slide-to="0" class="active"></li> <li data-target="#bs-carousel" data-slide-to="1"></li> <li data-target="#bs-carousel" data-slide-to="2"></li> </ol>  <div class="carousel-inner"> <div class="item slides active"> <div class="slide-1"></div> <div class="hero"> <hgroup> <h1>We are creative</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> <div class="item slides"> <div class="slide-2"></div> <div class="hero"> <hgroup> <h1>We are smart</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> <div class="item slides"> <div class="slide-3"></div> <div class="hero"> <hgroup> <h1>We are amazing</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-7"> <div class="panel panel-default"> <div class="bs-callout bs-callout-danger"> <h4>First we need to create the Sidebar, To-top and Social buttons framework</h4> <p> First we need to define the buttons we are later going to code for the sidebar navigation this will be the foundation that we reference to so remember what you name them. </p> <p> <b>1. </b> To get a basic buttons we just add class <span class="nocode">.btn</span> to the <code><a></code> element.<br> <b>1.a. </b> we also need to add the <span class="nocode">.toggle</span> class to the sidebar to fire later during a hover event. <blockquote> <b>Note: </b> I have added custom buttons CSS called <span class="nocode">.btn-dark</span> which gives you that <span class="nocode">.btn-inverse</span> look. </blockquote> <pre class="prettyprint linenums:1"> <a href="#" class="btn btn-dark btn-lg toggle"> <span class="sr-only">Toggle Sidebar Navigation</span> <i class="fa fa-bars"></i> </a> <a class="btn btn-lg btn-dark" href="#top"> <span class="sr-only">Toggle to Top Navigation</span> <i class="fa fa-chevron-up"></i> </a></pre> </p> <p> </p> </div> </div> <div class="panel panel-default"> <div class="bs-callout bs-callout-danger"> <p> <b>2. </b> next we need to add the id elements to reference in the jQuery they are: <span class="nocode">menu-toggle</span>, and <span class="nocode">to-top</span>.<br> <blockquote> <b>Note: </b> I have added custom buttons CSS called <span class="nocode">.btn-dark</span> which gives you that <span class="nocode">.btn-inverse</span> look. </blockquote> <pre class="prettyprint linenums:1"> <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a> <a id="to-top" class="btn btn-lg btn-dark" href="#top"> <span class="sr-only">Toggle to Top Navigation</span> <i class="fa fa-chevron-up"></i> </a></pre> </p> <p> In this example we are going to add the <span class="nocode">.panel-default</span> for Bootstrap default panel styling. </p> </div> </div> </div> <div class="col-md-4 hidden-xs hidden-sm"> <div class="panel panel-default"> <div class="bs-callout bs-right-panel"> <a href="//www.ipage.com/join/index.bml?bannerID=550&AffID=743889"> <img class="img-responsive" src="http://www.ipage.com/affiliate/banners/550" style="border:0px" alt="affiliate_link"/> </a> </div> </div> <div class="panel panel-default"> <div class="bs-callout bs-right-panel"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1487659930909767" data-ad-slot="6784370337" data-ad-format="auto"> </ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="panel panel-default"> <div class="bs-callout bs-right-panel"> <div class="row"> <h3 class="text-primary">Download Resume below</h3> </div> <div class="row"> <a type="button" class="btn btn-success btn-lg btn-block" href="https://drive.google.com/open?id=0By_9nIhC1083ZV9xQ0tDUUdsQkk" target="_blank">Click to view & download</a> </div> </div> </div> </div> </div> </div> <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> <script> $(document).ready(function(){ $("[rel='tooltip']").tooltip(); }); </script> </body>

Related: See More

Paper Dashboard PRO React

Paper Dashboard PRO React

Questions / Comments:

Posting GuidelinesFormatting