"Centered search form"
Bootstrap 3.3.0 Snippet by afelix

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
<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="container" style="margin-top: 8%;">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1>This is Logo</h1><p>Slogan of thematic</p>
</div>
<form role="form" id="form-buscar">
<div class="form-group">
<div class="input-group">
<input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
<span class="input-group-btn">
<button class="btn btn-success" type="submit">
<i class="glyphicon glyphicon-search" aria-hidden="true"></i> Search
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
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
* {
-webkit-border-radius: 1px !important;
-moz-border-radius: 1px !important;
border-radius: 1px !important;
}
#logo {
color: #666;
width:100%;
}
#logo h1 {
font-size: 60px;
text-shadow: 1px 2px 3px #999;
font-family: Roboto, sans-serif;
font-weight: 700;
letter-spacing: -1px;
}
#logo p{
padding-bottom: 20px;
}
#form-buscar >.form-group >.input-group > .form-control {
height: 40px;
}
#form-buscar >.form-group >.input-group > .input-group-btn > .btn{
height: 40px;
font-size: 16px;
font-weight: 300;
}
#form-buscar >.form-group >.input-group > .input-group-btn > .btn .glyphicon{
margin-right:12px;
}
#form-buscar >.form-group >.input-group > .form-control {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: