"Booking Page V1"
Bootstrap 4.0.0 Snippet by lildwitte

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="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">Booking Info So Far</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="booking_by">Booking By:</label>
<input type="text" readonly class="form-control" name="booking_by" value="Manager: Dwaine">
</div>
</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="type">Type</label>
<input type="text" readonly class="form-control" value="both" name="type">
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="form-group">
<label class="control-label required" for="address">Address:</label>
<input type="text" readonly class="form-control" name="address" value="4901 Aztec Blvd # 49, Columbia, MO 65202">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<div class="form-group">
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
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; }
.has-success .form-control:focus { border-color: #3c763d; outline: 0; -webkit-box-shadow: none; box-shadow: none; }
.has-error .form-control { border-color: #a94442; background-color: #f8f8f9; box-shadow: none; }
.has-error .form-control:focus { border-color: #34b2a4; outline: 0; -webkit-box-shadow: none; box-shadow: none; }
.input-group-addon:last-child { border-left: 0; border-right: transparent; border-top: transparent; border-bottom: transparent; }
.input-group-addon i { color: #0e142e; }
.btn-select { font-size: 14px; }
select option { margin: 40px; background: rgba(255, 255, 255, 1); color: #7a7f94;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); position: relative; }
select.form-control { position: relative; }
select {-moz-appearance: none; border-radius: 0px; font-size: 14px; font-weight: 700; width: 100%; padding: 14px; line-height: 1.42857143; border: 1px solid #e0e5e9; background-color: #fff; text-transform: capitalize; -webkit-appearance: none; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); }
.select {position: relative; display: block; line-height: 3; overflow: hidden; }
select { width: 100%; height: 100%; margin: 0; padding: 0 0 0 .5em; cursor: pointer; color: #FFF; font-size: 16px; }
.select::after { position: absolute; top: 0; right: 0; bottom: 0; padding: 10px 17px 0px 0px; background: transparent; pointer-events: none; font-family: FontAwesome; content: "\f107"; font-size: 16px; }
.select:hover::after { color: #023981; }
.select::after { -webkit-transition: .25s all ease; -o-transition: .25s all ease; transition: .25s all ease; }
select option { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor: pointer; padding: 10px; width: 100%; background-color: #fff; font-family: 'Merriweather Sans', sans-serif; }
.input-group>.custom-select:not(:last-child), .input-group>.form-control:not(:last-child) { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
#datepicker { }
.default-skin .ui-widget-header { border: 1px solid #e4e7e9; background: #f3f6f8; color: #fff; font-weight: bold; }
.default-skin .ui-state-highlight, .default-skin .ui-widget-content .ui-state-highlight, .default-skin .ui-widget-header .ui-state-highlight { border: 1px solid #e4e7e9; background: #f3f6f8; color: #fff; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var i=1;
var myFunc = function(){
b=i-1;
$('#scanner'+i).html($('#scanner'+b).html());
$('#scanner').append('<div class="form-group"><input id="scanner'+i+'" type="text" name="text" class="form-control"></div>');
$("#scanner"+i).focus();
i++;
}
$(document).on("keypress", ":input:not(textarea)", function(event) {
if (event.keyCode == 13) {
event.preventDefault();
myFunc();
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: