<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="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;
}
