Bootstrap Snippet Different Search box using HTML CSS Bootstrap

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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
                
                <div class="container-box col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
                    <h4>Search show</h4>
                    <div class="search-s">
                        <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
                        <button type="submit" class="btn btn-primary btn-sm">Search</button>
                    </div>  
                </div>
                
                
                <div class="container-box col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
                    <h4>Mouse over search box</h4>
                    <div class="search">
                        <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
                        <button type="submit" class="btn btn-primary btn-sm">Search</button>
                    </div> 
                </div>
                
                <div class=" container-box col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
                    <h4>Mouse over slide from right</h4>
                    <div class="search-right">
                        <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
                        <button type="submit" class="btn btn-primary btn-sm">Search</button>
                    </div>
                    
                </div>
                
                
                <div class=" container-box col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
                    <h4>Mouse over slide from left</h4>
                    <div class="search-show">
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
 
            
            
            .btn {
            height: 30px;
            position: absolute;
            right: 0;
            top: 5px;
            border-radius:1px;
            }
            
            .search:hover input, .search input:focus, .search-right:hover input, .search-right input:focus, .search-show:hover input, .search-show input:focus {
            width: 200px;
            margin-left: 0px;
            padding-left: 5px;
            }
            
            
            .search {
            padding: 5px 0;
            width: 230px;
            height: 30px;
            position: relative;
            left: 60px;
            float: left;
            line-height: 22px;
            }
            
            .search input {
            position: absolute;
            width: 0px;
            float: right;
            margin-left: 210px;
            -webkit-transition: all 0.7s ease-in-out;
            -moz-transition: all 0.7s ease-in-out;
            -o-transition: all 0.7s ease-in-out;
            transition: all 0.7s ease-in-out;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Different Search box"
Bootstrap 3.1.0 Snippet by Kiraan

Related: See More

Questions / Comments:

"Different Search box" Bootstrap 3.1.0 Snippet by Kiraan

Related: See More

Questions / Comments:

"Different Search box"
Bootstrap 3.1.0 Snippet by Kiraan