"tab search switch"
Bootstrap 3.3.0 Snippet by luismacayo

<div class="container"> <div class="col-md-12" id="loquesea"> <div class="col-md-5" id="buscador-home"> <div class="col-md-2" id="tab-home"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="text-center active"><a href="#hotel" aria-controls="hotel" role="tab" data-toggle="tab"><i class="fa fa-bed" aria-hidden="true"></i> Hoteles</a></li> <li role="presentation" class="text-center"><a href="#tour" aria-controls="tour" role="tab" data-toggle="tab"><i class="fa fa-binoculars" aria-hidden="true"></i> Tours</a></li> <li role="presentation" class="text-center"><a href="#transfer" aria-controls="transfer" role="tab" data-toggle="tab"><i class="fa fa-taxi" aria-hidden="true"></i> Traslados</a></li> </ul> </div> <div class="col-md-10" id="content-home"> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="hotel"> <form method="post" id="hotel-form"> <div class="form-group has-feedback col-md-12"> <label for="query_hoteles">Hotel o Destino</label> <input type="hidden" id="by_hotel" name="by" value=""> <input type="hidden" id="id_hotel" name="id" value=""> <input type="text" class="form-control" id="query_hoteles" placeholder="Hotel, Destino, Ciudad, localidad..." aria-describedby="helpQuery" value=""> <i class="fa fa-building-o form-control-feedback"></i> <span id="helpQuery" class="help-block hidden">Debes seleccionar algun Hotel o Destino</span> </div> <div id="event_period"> <div class="form-group has-feedback col-md-6"> <label for="">Desde</label> <input type="text" class="form-control actual_range" name="in" id="checkin_tour" placeholder="yyyy-mm-dd"> <i class="fa fa-calendar form-control-feedback"></i> </div> <div class="form-group has-feedback col-md-6"> <label for="">Hasta</label> <input type="text" class="form-control actual_range" name="out" id="checkout_tour" placeholder="yyyy-mm-dd"> <i class="fa fa-calendar form-control-feedback"></i> </div> </div> <div class="form-group col-md-6"> <label for="rooms">Habitaciones</label> <select name="hab" id="rooms" class="form-control"> <option value="1">1 Habitacion</option> <option value="2">2 Habitaciones</option> <option value="3">3 Habitaciones</option> <option value="4">4 Habitaciones</option> <option value="5">5 Habitaciones</option> <option value="6">6 Habitaciones</option> <option value="7">7 Habitaciones</option> <option value="8">8 Habitaciones</option> <option value="9">9 Habitaciones</option> <option value="10">10 Habitaciones</option> </select> <!--<input type="number" class="form-control" id="rooms" name="hab" min="1" max="10" value="1">--> </div> <div id="acomodo-buscador"> <div class="hab-group"> <div class="form-group col-md-3"> <label for="adt">Adultos</label> <input type="number" class="form-control" name="adt" min="1" max="15" value="2"> </div> <div class="form-group col-md-3"> <label for="chd">Niños</label> <input type="number" class="form-control" name="chd" min="0" max="10" value="0"> </div> <div class="age-chd"></div> </div> </div> <div class="form-group col-md-12"> <button type="submit" class="btn btn-info btn-lg btn-block"><i class="fa fa-search" aria-hidden="true"></i></button> </div> </form> </div> <div role="tabpanel" class="tab-pane" id="tour"> <form method="post" id="tour-form"> <div class="form-group has-feedback col-md-12"> <label for="query_tour">Hotel o Destino</label> <input type="hidden" id="by_tour" name="by" value=""> <input type="hidden" id="id_tour" name="id" value=""> <input type="text" class="form-control" id="query_tour" placeholder="Tour, Evento, Ciudad..." aria-describedby="helpQuery" value=""> <i class="fa fa-building-o form-control-feedback"></i> <span id="helpQuery" class="help-block hidden">Debes seleccionar algun Tour o Destino</span> </div> <div> <div class="form-group has-feedback col-md-6"> <label for="">Desde</label> <input type="text" class="form-control actual_range" name="in" id="checkin_tour" placeholder="yyyy-mm-dd"> <i class="fa fa-calendar form-control-feedback"></i> </div> <div class="form-group col-md-3"> <label for="adt">Adultos</label> <input type="number" class="form-control" name="adt" min="1" max="15" value="2"> </div> <div class="form-group col-md-3"> <label for="chd">Niños</label> <input type="number" class="form-control" name="chd" min="0" max="10" value="0"> </div> <div class="age-chd"></div> </div> <div class="form-group col-md-12"> <button type="submit" class="btn btn-info btn-lg btn-block"><i class="fa fa-search" aria-hidden="true"></i></button> </div> </form> </div> <div role="tabpanel" class="tab-pane" id="transfer"> <form method="post" id="transfer-form"> <div class="form-group has-feedback col-md-12"> <label for="query_transfer_o">Oirgen</label> <input type="hidden" id="by_transfer_o" name="by" value=""> <input type="hidden" id="id_transfer_o" name="id" value=""> <input type="text" class="form-control" id="query_transfer_o" placeholder="Hotel, Ciudad, Localidad..." aria-describedby="helpQuery" value=""> <i class="fa fa-building-o form-control-feedback"></i> <span id="helpQuery" class="help-block hidden">Debes seleccionar algun Tour o Destino</span> </div> <div class="form-group has-feedback col-md-12"> <label for="query_transfer_d">Destino</label> <input type="hidden" id="by_transfer_d" name="by" value=""> <input type="hidden" id="id_transfer_d" name="id" value=""> <input type="text" class="form-control" id="query_transfer_d" placeholder="Hotel, Ciudad, Localidad..." aria-describedby="helpQuery" value=""> <i class="fa fa-building-o form-control-feedback"></i> <span id="helpQuery" class="help-block hidden">Debes seleccionar algun Tour o Destino</span> </div> <div id="event_period"> <div class="form-group has-feedback col-md-6"> <label for="">Ida</label> <input type="text" class="form-control actual_range" name="in" id="checkin_transfer" placeholder="yyyy-mm-dd"> <i class="fa fa-calendar form-control-feedback"></i> </div> <div class="form-group has-feedback col-md-6"> <label for="">Vuelta</label> <input type="text" class="form-control actual_range" name="out" id="checkout_transfer" placeholder="yyyy-mm-dd"> <i class="fa fa-calendar form-control-feedback"></i> </div> </div> <div class="col-md-12"> <div class="form-group col-md-3"> <label for="adt">Adultos</label> <input type="number" class="form-control" name="adt" min="1" max="15" value="2"> </div> <div class="form-group col-md-3"> <label for="chd">Niños</label> <input type="number" class="form-control" name="chd" min="0" max="10" value="0"> </div> <div class="age-chd"></div> </div> <div class="form-group col-md-12"> <button type="submit" class="btn btn-info btn-lg btn-block"><i class="fa fa-search" aria-hidden="true"></i></button> </div> </form> </div> </div> </div> </div> </div> </div>
.container { background-color: blue; } #loquesea { position:relative; } #buscador-home { position: absolute; top: 40px; left: 5px; z-index: 1000; } /*Estidlo buscador Home*/ .form-control-feedback { text-align: inherit; } #buscador-home .col-md-* { padding-left: 0px } #buscador-home .nav > li > a { position: relative; display: block; width: 100%; background-color: rgba(255,255,255,0.9); /*padding: 5px 10px;*/ } #content-home { padding-left: 0px; background-color: rgba(255,255,255,0.9); -webkit-border-radius: 25px; -webkit-border-top-left-radius: 0; -moz-border-radius: 25px; -moz-border-radius-topleft: 0; border-radius: 25px; border-top-left-radius: 0; padding: 15px 0px 10px 0px; padding: 15px 0px 10px 0px; } #tab-home { padding-left: 0px; padding-right: 0px; } /*botenes tab*/ #tab-home .nav-tabs > li > a { width: 72px; } /*boton activo*/ #tab-home .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover { color: #555; cursor: default; background-color: rgba(255,255,255,1); } /*primer botoon*/ #tab-home .nav-tabs > li:first-child > a { color: #555; cursor: default; background-color: rgba(255,255,255,0.9); -webkit-border-top-left-radius: 25px; -moz-border-radius-topleft: 25px; border-top-left-radius: 25px; } #tab-home .nav-tabs > li:first-child.active > a, .nav-tabs > li:first-child.active > a:focus { color: #555; cursor: default; background-color: rgba(255,255,255,0.9); -moz-border-radius-topleft: 25px; } #tab-home .nav-tabs > li:first-child.active > a, .nav-tabs > li:first-child.active > a:hover { color: #555; cursor: default; background-color: rgba(255,255,255,1); border-top-left-radius: 25px; } /*ultimo botoon*/ #tab-home .nav-tabs > li:last-child > a { color: #555; cursor: default; background-color: rgba(255,255,255,0.9); -webkit-border-bottom-left-radius: 25px; -moz-border-radius-bottomleft: 25px; border-bottom-left-radius: 25px; } #tab-home .nav-tabs > li:last-child.active > a, .nav-tabs > li:last-child.active > a:focus { color: #555; cursor: default; background-color: rgba(255,255,255,0.9); -webkit-border-bottom-left-radius: 25px; -moz-border-radius-bottomleft: 25px; border-bottom-left-radius: 25px; } #tab-home .nav-tabs > li:last-child.active > a, .nav-tabs > li:last-child.active > a:hover { color: #555; cursor: default; background-color: rgba(255,255,255,1); -webkit-border-bottom-left-radius: 25px; -moz-border-radius-bottomleft: 25px; border-bottom-left-radius: 25px; }

Questions / Comments:

Related: See More