"Bootstrap 3.2 Google Plus style Theme"
Bootstrap 3.2.0 Snippet by hectorblanco95

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <nav class="navbar navbar-fixed-top header"> <div class="col-md-12"> <div class="navbar-header"> <a href="#" class="navbar-brand">Bootstrap</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse1"> <i class="glyphicon glyphicon-search"></i> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse1"> <form class="navbar-form pull-left"> <div class="input-group" style="max-width:470px;"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> <div class="input-group-btn"> <button class="btn btn-default btn-primary" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="http://www.bootply.com" target="_ext">Bootply+</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-bell"></i></a> <ul class="dropdown-menu"> <li><a href="#"><span class="badge pull-right">40</span>Link</a></li> <li><a href="#"><span class="badge pull-right">2</span>Link</a></li> <li><a href="#"><span class="badge pull-right">0</span>Link</a></li> <li><a href="#"><span class="label label-info pull-right">1</span>Link</a></li> <li><a href="#"><span class="badge pull-right">13</span>Link</a></li> </ul> </li> <li><a href="#" id="btnToggle"><i class="glyphicon glyphicon-th-large"></i></a></li> <li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li> </ul> </div> </div> </nav> <div class="navbar navbar-default" id="subnav"> <div class="col-md-12"> <div class="navbar-header"> <a href="#" style="margin-left:15px;" class="navbar-btn btn btn-default btn-plus dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-home" style="color:#dd1111;"></i> Home <small><i class="glyphicon glyphicon-chevron-down"></i></small></a> <ul class="nav dropdown-menu"> <li><a href="#"><i class="glyphicon glyphicon-user" style="color:#1111dd;"></i> Profile</a></li> <li><a href="#"><i class="glyphicon glyphicon-dashboard" style="color:#0000aa;"></i> Dashboard</a></li> <li><a href="#"><i class="glyphicon glyphicon-inbox" style="color:#11dd11;"></i> Pages</a></li> <li class="nav-divider"></li> <li><a href="#"><i class="glyphicon glyphicon-cog" style="color:#dd1111;"></i> Settings</a></li> <li><a href="#"><i class="glyphicon glyphicon-plus"></i> More..</a></li> </ul> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse2"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Posts</a></li> <li><a href="#loginModal" role="button" data-toggle="modal">Login</a></li> <li><a href="#aboutModal" role="button" data-toggle="modal">About</a></li> </ul> </div> </div> </div> <!--main--> <div class="container" id="main"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Bootstrap Examples</h4></div> <div class="panel-body"> <div class="list-group"> <a href="http://bootply.com/tagged/modal" class="list-group-item">Modal / Dialog</a> <a href="http://bootply.com/tagged/datetime" class="list-group-item">Datetime Examples</a> <a href="http://bootply.com/tagged/datatable" class="list-group-item">Data Grids</a> </div> </div> </div> <div class="well"> <form class="form-horizontal" role="form"> <h4>What's New</h4> <div class="form-group" style="padding:14px;"> <textarea class="form-control" placeholder="Update your status"></textarea> </div> <button class="btn btn-success pull-right" type="button">Post</button><ul class="list-inline"><li><a href="#"><i class="glyphicon glyphicon-align-left"></i></a></li><li><a href="#"><i class="glyphicon glyphicon-align-center"></i></a></li><li><a href="#"><i class="glyphicon glyphicon-align-right"></i></a></li></ul> </form> </div> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>More Templates</h4></div> <div class="panel-body"> <img src="//placehold.it/150x150" class="img-circle pull-right"> <a href="#">Free @Bootply</a> <div class="clearfix"></div> There a load of new free Bootstrap 3 ready templates at Bootply. All of these templates are free and don't require extensive customization to the Bootstrap baseline. <hr> <ul class="list-unstyled"><li><a href="http://www.bootply.com/templates">Dashboard</a></li><li><a href="http://www.bootply.com/templates">Darkside</a></li><li><a href="http://www.bootply.com/templates">Greenfield</a></li></ul> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="well"> <form class="form"> <h4>Sign-up</h4> <div class="input-group text-center"> <input type="text" class="form-control input-lg" placeholder="Enter your email address"> <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span> </div> </form> </div> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Bootply Editor & Code Library</h4></div> <div class="panel-body"> <p><img src="//placehold.it/150x150" class="img-circle pull-right"> <a href="#">The Bootstrap Playground</a></p> <div class="clearfix"></div> <hr> Design, build, test, and prototype using Bootstrap in real-time from your Web browser. Bootply combines the power of hand-coded HTML, CSS and JavaScript with the benefits of responsive design using Bootstrap. Find and showcase Bootstrap-ready snippets in the 100% free Bootply.com code repository. </div> </div> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Portlet Heading</h4></div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item">Modals</li> <li class="list-group-item">Sliders / Carousel</li> <li class="list-group-item">Thumbnails</li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Portlet Heading</h4></div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item">Bootply Playground</li> <li class="list-group-item">Bootstrap Editor</li> <li class="list-group-item">Bootstrap Templates</li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Stackoverflow</h4></div> <div class="panel-body"> <img src="//placehold.it/150x150" class="img-circle pull-right"> <a href="#">Keyword: Bootstrap</a> <div class="clearfix"></div> <hr> <p>If you're looking for help with Bootstrap code, the <code>twitter-bootstrap</code> tag at <a href="http://stackoverflow.com/questions/tagged/twitter-bootstrap">Stackoverflow</a> is a good place to find answers.</p> <hr> <form> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default">+1</button><button class="btn btn-default"><i class="glyphicon glyphicon-share"></i></button> </div> <input type="text" class="form-control" placeholder="Add a comment.."> </div> </form> </div> </div> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Top Items</h4></div> <div class="panel-body"> <div class="list-group"> <a href="http://bootply.com/tagged/bootstrap-3" class="list-group-item active">Bootstrap 3</a> <a href="http://bootply.com/tagged/snippets" class="list-group-item">Snippets</a> <a href="http://bootply.com/tagged/example" class="list-group-item">Examples</a> </div> </div> </div> </div> </div><!--/row--> <hr> <div class="row"> <div class="col-md-12"><h2>Posts</h2></div> <div class="col-md-4 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Upgrade to Bootstrap 3</h4></div> <div class="panel-body"> <img src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=70" class="img-circle pull-right"> <a href="#">Guidance and Tools</a> <div class="clearfix"></div> <hr> <p>Migrating from Bootstrap 2.x to 3 is not a simple matter of swapping out the JS and CSS files. Bootstrap 3 is a major overhaul, and there are a lot of changes from Bootstrap 2.x. <a href="http://bootply.com/bootstrap-3-migration-guide">This guidance</a> is intended to help 2.x developers transition to 3. </p> <h5><a href="http://google.com/+bootply">More on Upgrading from +Bootply</a></h5> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Profiles</h4></div> <div class="panel-body"> Check out some of our member profiles.. <hr> <div class="well well-sm"> <div class="media"> <a class="thumbnail pull-left" href="#"> <img class="media-object" src="//placehold.it/80"> </a> <div class="media-body"> <h4 class="media-heading">John Doe</h4> <p><span class="label label-info">10 photos</span> <span class="label label-primary">89 followers</span></p> <p> <a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-comment"></span> Message</a> <a href="#" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-heart"></span> Favorite</a> </p> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Inspiration</h4></div> <div class="panel-body"> <img src="//placehold.it/150" class="img-circle pull-right"> <a href="#">Articles</a> <div class="clearfix"></div> <hr> <div class="clearfix"></div> <img src="http://placehold.it/120x90/3333CC/FFF" class="img-responsive img-thumbnail pull-right"> <p>The more powerful (and 100% fluid) Bootstrap 3 grid now comes in 4 sizes (or "breakpoints"). Tiny (for smartphones), Small (for tablets), Medium (for laptops) and Large (for laptops/desktops).</p> <div class="clearfix"></div> <hr> <div class="clearfix"></div> <img src="http://placehold.it/120x90/33CC33/FFF" class="img-responsive img-thumbnail pull-left" style="margin-right:5px;"> <p>Mobile first" is a responsive Web design practice that prioritizes consideration of smart phones and mobile devices when creating Web pages.</p> </div> </div> </div><!--/articles--> </div> <hr> <div class="row"> <div class="col-sm-4 col-xs-6"> <div class="panel panel-default"> <div class="panel-thumbnail"><img src="//placehold.it/450X300/DD3333/EE3333" class="img-responsive"></div> <div class="panel-body"> <p class="lead">Hacker News</p> <p>120k Followers, 900 Posts</p> <p> <img src="http://www.bikeforums.net/avatars/wiggles_dad.gif?dateline=1294502655" width="28px" height="28px"> <img src="http://www.bikeforums.net/avatars/wiggles_dad.gif?dateline=1294502655" width="28px" height="28px"> <img src="http://www.bikeforums.net/avatars/wiggles_dad.gif?dateline=1294502655" width="28px" height="28px"> </p> </div> </div> </div><!--/col--> <div class="col-sm-4 col-xs-6"> <div class="panel panel-default"> <div class="panel-thumbnail"><img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive"></div> <div class="panel-body"> <p class="lead">Bootstrap Templates</p> <p>902 Followers, 88 Posts</p> <p> <img src="http://www.bikeforums.net/avatars/wiggles_dad.gif?dateline=1294502655" width="28px" height="28px"> <img src="http://www.bikeforums.net/avatars/wiggles_dad.gif?dateline=1294502655" width="28px" height="28px"> </p> </div> </div> </div><!--/col--> <div class="col-sm-4 col-xs-6"> <div class="panel panel-default"> <div class="panel-thumbnail"><img src="//placehold.it/450X300/2222DD/2222EE" class="img-responsive"></div> <div class="panel-body"> <p class="lead">Social Media</p> <p>19k Followers, 789 Posts</p> <p> <img src="http://www.bikeforums.net/avatars/wiggles_dad.gif?dateline=1294502655" height="28px"> <img src="http://www.bikeforums.net/avatars/wiggles_dad.gif?dateline=1294502655" width="28px" height="28px"> </p> </div> </div> </div><!--/col--> </div> <hr> <div class="row"> <div class="col-md-12"><h2>Playground</h2></div> <div class="col-md-12"> <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div> </div> <div class="col-md-6 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Buttons & Labels</h4></div> <div class="panel-body"> <div class="row"> <div class="col-xs-4"><a class="btn btn-default center-block" href="#">Button</a></div> <div class="col-xs-4"><a class="btn btn-primary center-block" href="#">Primary</a></div> <div class="col-xs-4"><a class="btn btn-danger center-block" href="#">Danger</a></div> </div> <br> <div class="row"> <div class="col-xs-4"><a class="btn btn-warning center-block" href="#">Warning</a></div> <div class="col-xs-4"><a class="btn btn-info center-block" href="#">Info</a></div> <div class="col-xs-4"><a class="btn btn-success center-block" href="#">Success</a></div> </div> <hr> <div class="btn-group btn-group-sm"><button class="btn btn-default">1</button><button class="btn btn-default">2</button><button class="btn btn-default">3</button></div> <hr> <div class="row"> <div class="col-md-4"> <span class="label label-default">Label</span> <span class="label label-success">Success</span> </div> <div class="col-md-4"> <span class="label label-warning">Warning</span> <span class="label label-info">Info</span> </div> <div class="col-md-4"> <span class="label label-danger">Danger</span> <span class="label label-primary">Primary</span> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Progress Bars</h4></div> <div class="panel-body"> <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 20%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 40%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 80%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 50%"></div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"><a href="#" class="pull-right">View all</a> <h4>Tabs</h4></div> <div class="panel-body"> <ul class="nav nav-tabs"> <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li> <li><a href="#B" data-toggle="tab">Section 2</a></li> <li><a href="#C" data-toggle="tab">Section 3</a></li> </ul> <div class="tabbable"> <div class="tab-content"> <div class="tab-pane active" id="A"> <div class="well well-sm">I'm in Section A.</div> </div> <div class="tab-pane" id="B"> <div class="well well-sm">Howdy, I'm in Section B.</div> </div> <div class="tab-pane" id="C"> <div class="well well-sm">I've decided that I like wells.</div> </div> </div> </div> <!-- /tabbable --> <div class="col-sm-12 text-center"> <ul class="pagination center-block" style="display:inline-block;"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div> </div> </div> </div><!--playground--> <br> <div class="clearfix"></div> <hr> <div class="col-md-12 text-center"><p><a href="http://www.bootply.com/download/90113" target="_ext">Download Google Plus Style Template</a><br><a href="http://bootply.com/templates" target="_ext">More Bootstrap Templates by @Bootply</a></p></div> <hr> </div> </div><!--/main--> <!--login modal--> <div id="loginModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="text-center"><img src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=100" class="img-circle"><br>Login</h2> </div> <div class="modal-body"> <form class="form col-md-12 center-block"> <div class="form-group"> <input type="text" class="form-control input-lg" placeholder="Email"> </div> <div class="form-group"> <input type="password" class="form-control input-lg" placeholder="Password"> </div> <div class="form-group"> <button class="btn btn-primary btn-lg btn-block">Sign In</button> <span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span> </div> </form> </div> <div class="modal-footer"> <div class="col-md-12"> <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> </div> </div> </div> </div> </div> <!--about modal--> <div id="aboutModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="text-center">About</h2> </div> <div class="modal-body"> <div class="col-md-12 text-center"> <a href="http://www.bootply.com/DwnjTNuvVt">This Bootstrap Template</a><br>was made with <i class="glyphicon glyphicon-heart"></i> by <a href="http://bootply.com/templates">Bootply</a> <br><br> <a href="https://github.com/iatek/bootstrap-google-plus">GitHub Fork</a> </div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">OK</button> </div> </div> </div> </div>
/* A custom Bootstrap 3.2 'Google Plus style' theme from http://bootply.com This CSS code should follow the 'bootstrap.css' in your HTML file. license: MIT author: bootply.com */ @import url(http://fonts.googleapis.com/css?family=Roboto:400); body { background-color:#e0e0e0; -webkit-font-smoothing: antialiased; font: normal 14px Roboto,arial,sans-serif; } .navbar-default {background-color:#f4f4f4;margin-top:50px;border-width:0;z-index:5;} .navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > li:hover > a {border:0 solid #4285f4;border-bottom-width:2px;font-weight:800;background-color:transparent;} .navbar-default .dropdown-menu {background-color:#ffffff;} .navbar-default .dropdown-menu li > a {padding-left:30px;} .header {background-color:#ffffff;border-width:0;} .header .navbar-collapse {background-color:#ffffff;} .btn,.form-control,.panel,.list-group,.well {border-radius:1px;box-shadow:0 0 0;} .form-control {border-color:#d7d7d7;} .btn-primary {border-color:transparent;} .btn-primary,.label-primary,.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {background-color:#4285f4;} .btn-plus {background-color:#ffffff;border-width:1px;border-color:#dddddd;box-shadow:1px 1px 0 #999999;border-radius:3px;color:#666666;text-shadow:0 0 1px #bbbbbb;} .well,.panel {border-color:#d2d2d2;box-shadow:0 1px 0 #cfcfcf;border-radius:3px;} .btn-success,.label-success,.progress-bar-success{background-color:#65b045;} .btn-info,.label-info,.progress-bar-info{background-color:#a0c3ff;border-color:#a0c3ff;} .btn-danger,.label-danger,.progress-bar-danger{background-color:#dd4b39;} .btn-warning,.label-warning,.progress-bar-warning{background-color:#f4b400;color:#444444;} hr {border-color:#ececec;} button { outline: 0; } textarea { resize: none; outline: 0; } .panel .btn i,.btn span{ color:#666666; } .panel .panel-heading { background-color:#ffffff; font-weight:700; font-size:16px; color:#262626; border-color:#ffffff; } .panel .panel-heading a { font-weight:400; font-size:11px; } .panel .panel-default { border-color:#cccccc; } .panel .panel-thumbnail { padding:0; } .panel .img-circle { width:50px; height:50px; } .list-group-item:first-child,.list-group-item:last-child { border-radius:0; } h3,h4,h5 { border:0 solid #efefef; border-bottom-width:1px; padding-bottom:10px; } .modal-dialog { width: 450px; } .modal-footer { border-width:0; } .dropdown-menu { background-color:#f4f4f4; border-color:#f0f0f0; border-radius:0; margin-top:-1px; } /* end theme */ /* template layout*/ #subnav { position:fixed; width:100%; } @media (max-width: 768px) { #subnav { padding-top: 6px; } } #main { padding-top:120px; }
/* jQuery toggle layout */ $('#btnToggle').click(function(){ if ($(this).hasClass('on')) { $('#main .col-md-6').addClass('col-md-4').removeClass('col-md-6'); $(this).removeClass('on'); } else { $('#main .col-md-4').addClass('col-md-6').removeClass('col-md-4'); $(this).addClass('on'); } });

Related: See More


Questions / Comments: