"Online Travel Booking"
Bootstrap 4.1.1 Snippet by Siddharth Panchal

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css?ver=1.0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css" />
<section class="banner">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light custom_header navbar-toggler py-3">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto my-lg-0 mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hotels</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Advantures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Travels</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Foods</a>
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
.search-sec{padding:2rem}
.search-slt{display:block;width:100%;font-size:.875rem;line-height:1.5;color:#55595c;background-color:#fff;background-image:none;border:1px solid #ccc;height:calc(3rem + 2px)!important;border-radius:0}
.wrn-btn{width:100%;font-size:16px;font-weight:400;text-transform:capitalize;height:calc(3rem + 2px)!important;border-radius:0 4px 4px 0;}
.wrn-btn:focus{outline:none;box-shadow:none;border:none;}
@media (min-width:992px){.search-sec{position:absolute;bottom:0px;width:100%;background:rgba(26,70,104,.51);z-index:9;}
}
@media (max-width:992px){.search-sec{position:relative;bottom:0px;width:100%;background:#1a4668;z-index:9;}
.owl-carousel.main_banner{position:relative !important;}
.custom_header{position:relative !important;top:0;z-index:99;width:100%;background: rgba(26,70,104,.51) !important;border-radius:0;}
}
.custom-search-input-2{background-color:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;margin-top:15px;box-shadow: 0 0 0 6px rgba(255,255,255,.25);}
@media (max-width: 991px){.custom-search-input-2{background:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
}
.custom-search-input-2 input{border:0;height:50px;padding-left:15px;border-right:1px solid #d2d8dd;font-weight:500}
@media (max-width: 991px){.custom-search-input-2 input{border:none}
}
.custom-search-input-2 input:focus{box-shadow:none;border-right:1px solid #d2d8dd}
@media (max-width: 991px){.custom-search-input-2 input:focus{border-right:none}
}
.custom-search-input-2 select{display:none}
.custom-search-input-2 .nice-select .current{font-weight:500;color:#6f787f}
.custom-search-input-2 .form-group{margin:0}
@media (max-width: 991px){.custom-search-input-2 .form-group{margin-bottom:5px}
}
.custom-search-input-2 i{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;font-size:18px;font-size:1.125rem;position:absolute;background-color:#fff;line-height:50px;top:0;right:1px;padding-right:15px;display:block;width:20px;box-sizing:content-box;height:50px;z-index:9;color:#999}
@media (max-width: 991px){.custom-search-input-2 i{padding-right:10px}
}
.custom-search-input-2 input[type='submit']{-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;color:#fff;font-weight:600;font-size:14px;font-size:0.875rem;border:0;padding:0 25px;height:50px;cursor:pointer;outline:none;width:100%;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;-ms-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;background-color:#fc5b62;margin-right:-1px}
@media (max-width: 991px){.custom-search-input-2 input[type='submit']{margin:20px 0 0 0;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px}
}
.custom-search-input-2 input[type='submit']:hover{background-color:#FFC107;color:#222}
.custom-search-input-2.inner{margin-bottom:30px;-webkit-box-shadow:0px 0px 30px 0px rgba(0,0,0,0.1);-moz-box-shadow:0px 0px 30px 0px rgba(0,0,0,0.1);box-shadow:0px 0px 30px 0px rgba(0,0,0,0.1)}
@media (max-width: 991px){.custom-search-input-2.inner{margin:0 0 20px 0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
}
.custom-search-input-2.inner-2{margin:0 0 20px 0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;background:none}
.custom-search-input-2.inner-2 .form-group{margin-bottom:10px}
.custom-search-input-2.inner-2 input{border:1px solid #ededed}
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
$(document).ready(function() {
$('.main_banner').owlCarousel({
loop:true,
autoplay: true,
margin:0,
nav:false,
center: true,
lazyLoad:true,
autoWidth:false,
responsiveClass:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
$('#city').niceSelect();
});
$(document).ready(function() {
$('.places').owlCarousel({
loop:true,
autoplay: true,
margin:0,
nav:true,
center: true,
lazyLoad:true,
autoWidth:false,
responsiveClass:true,
responsive:{
0:{
items:1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page
Instagram Style User Online
Tour & Travel Reservation Booking Form - Bootstrap 4.0
Product Page For Online Shop

Questions / Comments: