Bootstrap booking template

Forms Bootstrap 5Free+ CSS

Bootstrap booking template: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.

10.2k views459 downloads6 years ago

gosnippets.com/preview/bootstrap-booking-template

Source Code

1<div id="booking" class="section">
2<div class="section-center">
3<div class="container">
4<div class="row">
5<div class="booking-form">
6<div class="form-header">
7<h1>Make your reservation</h1>
8</div>
9<form>
10<div class="mb-3">
11<input class="form-control" type="text" placeholder="Country, ZIP, city...">
12<span class="form-label">Destination</span>
13</div>
14<div class="row">
15<div class="col-md-6">
16<div class="mb-3">
17<input class="form-control" type="date" required>
18<span class="form-label">Check In</span>
19</div>
20</div>
21<div class="col-md-6">
22<div class="mb-3">
23<input class="form-control" type="date" required>
24<span class="form-label">Check out</span>
25</div>
26</div>
27</div>
28<div class="row">
29<div class="col-md-4">
30<div class="mb-3">
31<select class="form-control" required>
32<option value="" selected hidden>no of rooms</option>
33<option>1</option>
34<option>2</option>
35<option>3</option>
36</select>
37<span class="select-arrow"></span>
38<span class="form-label">Rooms</span>
39</div>
40</div>
41<div class="col-md-4">
42<div class="mb-3">
43<select class="form-control" required>
44<option value="" selected hidden>no of adults</option>
45<option>1</option>
46<option>2</option>
47<option>3</option>
48</select>
49<span class="select-arrow"></span>
50<span class="form-label">Adults</span>
51</div>
52</div>
53<div class="col-md-4">
54<div class="mb-3">
55<select class="form-control" required>
56<option value="" selected hidden>no of children</option>
57<option>0</option>
58<option>1</option>
59<option>2</option>
60</select>
61<span class="select-arrow"></span>
62<span class="form-label">Children</span>
63</div>
64</div>
65</div>
66<div class="row">
67<div class="col-md-6">
68<div class="mb-3">
69<input class="form-control" type="email" placeholder="Enter your Email">
70<span class="form-label">Email</span>
71</div>
72</div>
73<div class="col-md-6">
74<div class="mb-3">
75<input class="form-control" type="tel" placeholder="Enter you Phone">
76<span class="form-label">Phone</span>
77</div>
78</div>
79</div>
80<div class="form-btn">
81<button class="submit-btn">Book Now</button>
82</div>
83</form>
84</div>
85</div>
86</div>
87</div>
88</div>

More Forms snippets

Bootstrap 5 simple login form with social login

Free Bootstrap 5 form snippet — Bootstrap 5 simple login form with social login. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

FormsView →

Bootstrap 5 Login Form UI Design snippets

Bootstrap 5 Login Form UI Design snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.

FormsView →

Bootstrap 5 Fancy user login form snippets

Free Bootstrap 5 form snippet — Bootstrap 5 Fancy user login form snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

FormsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div id="booking" class="section"> 2<div class="section-center"> 3<div class="container"> 4<div class="row"> 5<div class="booking-form"> 6<div class="form-header"> 7<h1>Make your reservation</h1> 8</div> 9<form> 10<div class="mb-3"> 11<input class="form-control" type="text" placeholder="Country, ZIP, city..."> 12<span class="form-label">Destination</span> 13</div> 14<div class="row"> 15<div class="col-md-6"> 16<div class="mb-3"> 17<input class="form-control" type="date" required> 18<span class="form-label">Check In</span> 19</div> 20</div> 21<div class="col-md-6"> 22<div class="mb-3"> 23<input class="form-control" type="date" required> 24<span class="form-label">Check out</span> 25</div> 26</div> 27</div> 28<div class="row"> 29<div class="col-md-4"> 30<div class="mb-3"> 31<select class="form-control" required> 32<option value="" selected hidden>no of rooms</option> 33<option>1</option> 34<option>2</option> 35<option>3</option> 36</select> 37<span class="select-arrow"></span> 38<span class="form-label">Rooms</span> 39</div> 40</div> 41<div class="col-md-4"> 42<div class="mb-3"> 43<select class="form-control" required> 44<option value="" selected hidden>no of adults</option> 45<option>1</option> 46<option>2</option> 47<option>3</option> 48</select> 49<span class="select-arrow"></span> 50<span class="form-label">Adults</span> 51</div> 52</div> 53<div class="col-md-4"> 54<div class="mb-3"> 55<select class="form-control" required> 56<option value="" selected hidden>no of children</option> 57<option>0</option> 58<option>1</option> 59<option>2</option> 60</select> 61<span class="select-arrow"></span> 62<span class="form-label">Children</span> 63</div> 64</div> 65</div> 66<div class="row"> 67<div class="col-md-6"> 68<div class="mb-3"> 69<input class="form-control" type="email" placeholder="Enter your Email"> 70<span class="form-label">Email</span> 71</div> 72</div> 73<div class="col-md-6"> 74<div class="mb-3"> 75<input class="form-control" type="tel" placeholder="Enter you Phone"> 76<span class="form-label">Phone</span> 77</div> 78</div> 79</div> 80<div class="form-btn"> 81<button class="submit-btn">Book Now</button> 82</div> 83</form> 84</div> 85</div> 86</div> 87</div> 88</div>