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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
/* 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');
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template Pro
Tabs style 1
Hover Effect Style
Instagram Style User Online

Questions / Comments: