"Tour & Travel Reservation Booking Form - Bootstrap 4.0"
Bootstrap 4.0.0 Snippet by Anita26

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="content">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb30 text-center">
<h2>Tour & Travel Reservation Booking Form</h2>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb30">
<div class="tour-booking-form">
<form>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
<h4 class="tour-form-title">Your Travel Plan Detail</h4>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="form-group">
<label class="control-label required" for="select">Destination</label>
<div class="select">
<select id="select" name="select" class="form-control">
<option value="">Where you want to go</option>
<option value="">Singapore</option>
<option value="">Thailand</option>
<option value="">Vietnam</option>
</select>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
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
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Merriweather Sans', sans-serif; letter-spacing: 0px; font-size: 14px; color: #36333c; font-weight: 400; line-height: 26px; }
.wrapper { margin: 0px 41px 41px 41px; }
h1, h2, h3, h4, h5, h6 { letter-spacing: 0px; font-weight: 300; color: #1c1e22; margin: 0px 0px 15px 0px; font-family: 'Merriweather Sans', sans-serif; }
h1 { font-size: 40px; }
h2 { font-size: 34px; }
h3 { font-size: 24px; font-weight: 400; }
h4 { font-size: 20px; font-weight: 400; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { margin: 0 0 20px; line-height: 2; }
p:last-child { margin: 0px; }
ul, ol { }
a { text-decoration: none; color: #121113; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
a:focus, a:hover { text-decoration: none; color: #3d0f82; }
.content{padding-top:120px; padding-bottom:120px;}
.mb30{margin-bottom:30px;}
.btn { font-family: 'Merriweather Sans', sans-serif; font-size: 16px; text-transform: capitalize; font-weight: 700; padding: 14px 40px; letter-spacing: 0px; border-radius: 50px; line-height: 2; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; word-wrap: break-word; white-space: normal !important; }
.btn-primary { background-color: #fcd55a; color: #121113; border: 2px solid #fcd55a; }
.btn-primary:hover { background-color: #efbf25; color: #121113; border: 2px solid #efbf25; }
.btn-primary.focus, .btn-primary:focus { background-color: #efbf25; color: #121113; border: 2px solid #efbf25; box-shadow: 0 0 0 0.2rem rgba(239, 191, 37, .5); color: #121113; }
label { }
.control-label { font-size: 14px; text-transform: capitalize; color: #20232b; margin-bottom: 8px; letter-spacing: 0px; font-weight: 400; }
.form-control:focus { }
textarea.form-control { height: 120px; }
.required { }
.form-group { margin-bottom: 5px; }
select.form-control:not([size]):not([multiple]) { height: 70px; }
.hero-section .form-control { border: 1px solid #8c897d; height: 58px; }
.form-control { border-radius: 8px; font-size: 12px; font-weight: 400; width: 100%; height: 70px; padding: 14px 18px; line-height: 1.42857143; border: 1px solid #dedbe3; background-color: #f8f8f9; text-transform: capitalize; letter-spacing: 0px; margin-bottom: 16px; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); -webkit-appearance: none; }
.form-control:focus { color: #121113 !important; outline: 0; -webkit-box-shadow: none; box-shadow: none; border-color: #d6dadf; }
input::-webkit-input-placeholder { color: #121113 !important; }
textarea::-webkit-input-placeholder { color: #121113 !important; }
.input-group-addon { background-color: transparent; border: 1px solid #eee; border-radius: 0px; position: absolute; right: 16px; top: 23px; font-size: 12px; }
.focus { border: 1px solid #d2cfd7; }
.focus:focus { border: 1px solid #d2cfd7; }
.has-success .form-control { border-color: #3c763d; background-color: #f8f8f9; box-shadow: none; }
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
$( function() {
$( "#datepicker" ).datepicker();
} );
/*! jQuery UI - v1.12.1 - 2016-09-14
* http://jqueryui.com
* Includes: widget.js, position.js, data.js, disable-selection.js, effect.js, effects/effect-blind.js, effects/effect-bounce.js, effects/effect-clip.js, effects/effect-drop.js, effects/effect-explode.js, effects/effect-fade.js, effects/effect-fold.js, effects/effect-highlight.js, effects/effect-puff.js, effects/effect-pulsate.js, effects/effect-scale.js, effects/effect-shake.js, effects/effect-size.js, effects/effect-slide.js, effects/effect-transfer.js, focusable.js, form-reset-mixin.js, jquery-1-7.js, keycode.js, labels.js, scroll-parent.js, tabbable.js, unique-id.js, widgets/accordion.js, widgets/autocomplete.js, widgets/button.js, widgets/checkboxradio.js, widgets/controlgroup.js, widgets/datepicker.js, widgets/dialog.js, widgets/draggable.js, widgets/droppable.js, widgets/menu.js, widgets/mouse.js, widgets/progressbar.js, widgets/resizable.js, widgets/selectable.js, widgets/selectmenu.js, widgets/slider.js, widgets/sortable.js, widgets/spinner.js, widgets/tabs.js, widgets/tooltip.js
* Copyright jQuery Foundation and other contributors; Licensed MIT */
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "jquery" ], factory );
} else {
// Browser globals
factory( jQuery );
}
}(function( $ ) {
$.ui = $.ui || {};
var version = $.ui.version = "1.12.1";
/*!
* jQuery UI Widget 1.12.1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard React
login-form
Login Form
Contact Form

Questions / Comments: