"Google Layout Style (Material Design)"
Bootstrap 3.3.0 Snippet by niksgupt

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <html> <head> <!-- Material Design Lite --> <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <!-- Material Design icon font --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!-- Always shows a header, even in smaller screens. --> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- Title --> <span class="mdl-layout-title">Title</span> <!-- Add spacer, to align navigation to the right --> <div class="mdl-layout-spacer"></div> <!-- Navigation. We hide it in small screens. --> <nav class="mdl-navigation mdl-layout--large-screen-only"> <a class="mdl-navigation__link" href="#">Link</a> <a class="mdl-navigation__link" href="#">Link</a> <a class="mdl-navigation__link" href="#">Link</a> <a class="mdl-navigation__link" href="#">Link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#">Link</a> <a class="mdl-navigation__link" href="#">Link</a> <a class="mdl-navigation__link" href="#">Link</a> <a class="mdl-navigation__link" href="#">Link</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"><!-- Your content goes here --></div> </main> </div> </body> </html> <!-- By Sem Van Der Vegte -->
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"); /* HERE STARTS THE MAGIC */ header { position: fixed; width:100%; z-index: 1; height: 0%; overflow: hidden; top: 0; left: 0; }

Related: See More

Material Bootstrap Wizard
social network layout - bootstrap 4
Tabs style 1
Hover Effect Style

Questions / Comments: