<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>

* { -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 { font-size: 16px; font-weight: 300; } #form-buscar >.form-group >.input-group > .form-control:focus { border-color: #33A444; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 1px rgba(0, 109, 0, 0.8); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 1px rgba(0, 109, 0, 0.8); }