<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"> <div class="row"> <h2>SEARCH INPUT WITH BUTTON GROUP PRETTY RESPONSIVE</h2> <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> <div class="input-group buscador-principal"> <input name="search_param" value="all" id="search_param" type="hidden"> <input class="form-control" name="x" placeholder="¿Qué quieres buscar?" type="text"> <div class="input-group-btn search-panel"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span id="search_concept">ABC</span> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="http://placesforlove.com">Placesforlove</a></li> <li><a href="http://placesforlove.com">It's Placesforlove</a></li> <li><a href="http://placesforlove.com">Greather than Placesforlove</a></li> <li><a href="http://placesforlove.com">Placesforlove </a></li> <li class="divider"></li> <li><a href="http://trovacamporella.com">trovacamporella</a></li> </ul> </div> <span class="input-group-btn"> <button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span> BUSCAR</button> </span> </div> </div> </div> </div>

.input-group { position: relative; display: table; border-collapse: separate; } .input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child) { border-radius: 0; } .buscador-principal .form-control { height: 52px; } /*BUTTON COLORS OVERIDE .btn-primary { color: #fff; background: #0086a1; background-image: -webkit-linear-gradient(top, #0086a1, #00738a); background-image: -moz-linear-gradient(top, #0086a1, #00738a); background-image: -ms-linear-gradient(top, #0086a1, #00738a); background-image: -o-linear-gradient(top, #0086a1, #00738a); background-image: linear-gradient(to bottom, #0086a1, #00738a); border: 1px solid #0085a1; border-radius: 3px; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -kthtml-transition: all 0.3s linear; transition: all 0.3s linear; }*/ .btn { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 14px; font-weight: 800; letter-spacing: 1px; border-radius: 0; padding: 15px 25px; } @media only screen and (max-width: 768px) { .buscador-principal { display: block; } .buscador-principal button{ width: 100%; } .claim-container { font-size: 20px; display: none; } }