"#materialdesign #material #design #material design #material design on bootstrap #bootstrap material design"
Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY

<nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="row"> <div class="col-md-12"> <h3>Custom content</h3> </div> <div class="col-md-4"> <div class="box"></div> </div> <div class="col-md-4"> <div class="box"></div> </div> <div class="col-md-4"> <div class="box"></div> </div> </div> </div> <div class="btn-area"> <div class="container"> <div class="row"> <div class="col-md-12"> <h3>Buttons</h3> </div> <div class="col-md-8 col-md-offset-2 text-center"> <button type="button" class="btn btn-sm">Small button</button> <button type="button" class="btn">Basic button</button> <button type="button" class="btn btn-lg">Large button</button> </div> </div> </div> </div>
/*font*/ @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); body{ font-family: 'Roboto', sans-serif; font-weight:500; background-color:#f1f1f1; } h3{ padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); } /*navbar*/ .navbar{ box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); } /*box*/ .box{ background-color:#fff; min-height:300px; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); border-radius: 2px; } /*btn-area*/ .btn-area{ padding-top:50px; padding-bottom:50px; } .btn{ font-weight:500; text-transform:uppercase; color:#fff; background-color: #FF4081; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); } .btn:hover,.btn:focus{ color:#fff; outline: transparent; } box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);

Similar snippets: See More


Comments:

Commenting will be back soon.