"Vineet1"
Bootstrap 4.0.0 Snippet by vineetsherawat

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> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Heroic Features - Start Bootstrap Template</title> <!-- Bootstrap core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/heroic-features.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Start Bootstrap</a> <button class="navbar-toggler" 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> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <!-- Page Content --> <div class="container"> <!-- Jumbotron Header --> <header class="jumbotron my-4"> <center> <h1 class="display-3">Welcome to FlexDeploy</h1> <h2 class="display-8">DevOps Platform for NetApp IT</h2> <p class="lead">Brief description of tool</p> </center> </header> <!-- Page Features --> <div class="row text-center"> <div class="col-lg-3 col-md-6 mb-4"> <a href="http://vmwpsstol01-stg.corp.netapp.com:60080/flexdeploy/faces/home" class="btn btn-primary btn-round">Login</a> </div> <!-- Single button --> <div class="col-lg-3 col-md-6 mb-4 show-on-hover"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Documentation <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">General Concepts</a></li> <li><a href="#">SOA</a></li> <li><a href="#">QuoteEdge</a></li> </ul> </div> <div class="col-lg-3 col-md-6 mb-4 show-on-hover"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Support <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Get Access</a></li> <li><a data-toggle="modal" href="#normalModal" class="btn btn-default">Get Access</a></li> <li><a href="#">Report an Issue</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!-- <div class="col-lg-3 col-md-6 mb-4"> <a href="#" class="btn btn-primary">Documentation</a> </div>--> </div> <!-- /.row --> <div id="normalModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <iframe frameborder="0" scrolling="no" width="700" height="700" src="http://google.about.com/b/2013/04/01/google-nose.htm"> </iframe> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> <!-- /.container --> <!-- Footer --> <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright © NetApp 2017</p> </div> <!-- /.container --> </footer> <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/popper/popper.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.min.js"></script> </body> </html>
body{ padding:10px; } .show-on-hover:hover > ul.dropdown-menu { display: block; }

Related: See More

Light Bootstrap Dashboard

Questions / Comments: