"Custom search bar"
Bootstrap 3.3.0 Snippet by Raiha

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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 ---------->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control SearchBar" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-defaul SearchButton" type="button">
<span class=" glyphicon glyphicon-search SearchIcon" ></span>
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.SearchIcon
{
color:#fff;
}
.SearchButton
{
background-color:#ED1C24;
border-radius:1px;
}
.SearchButton:hover{
background-color:#C4161C;
}
.SearchBar{
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro BS3
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments:

great snippets which we intend to use on our website. how do you pay for these or are they free
Dr Bella
bellanormatovdds@gmail.com
http://www.softtouchdentalh...
http://www.softtouchdentalh...

bella normatov, dds () - 8 years ago - Reply 0