Responsive Bootstrap multi step form wizard snippets — a free Bootstrap 5 form snippet. Copy the HTML and paste straight into your Bootstrap 5 project.
1<link rel="stylesheet" href="https://colorlib.com/etc/bwiz/colorlib-wizard-6/fonts/material-design-iconic-font/css/material-design-iconic-font.css">
2<link rel="stylesheet" href="https://colorlib.com/etc/bwiz/colorlib-wizard-6/css/style.css">
3<div class="wrapper">
4<form action="">
5<div id="wizard">
6
7<h4></h4>
8<section>
9<div class="form-header">
10<div class="avartar">
11<a href="#">
12<img src="https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/avartar.png" alt="">
13</a>
14<div class="avartar-picker">
15<input type="file" name="file-1[]" id="file-1" class="inputfile" data-multiple-caption="{count} files selected" multiple />
16<label for="file-1">
17<i class="zmdi zmdi-camera"></i>
18<span>Choose Picture</span>
19</label>
20</div>
21</div>
22<div class="mb-3">
23<div class="form-holder active">
24<input type="text" placeholder="First Name" class="form-control">
25</div>
26<div class="form-holder">
27<input type="text" placeholder="Last Name" class="form-control">
28</div>
29<div class="form-holder">
30<input type="text" placeholder="Team Name" class="form-control">
31</div>
32</div>
33</div>
34<div class="form-holder">
35<input type="text" placeholder="Email" class="form-control">
36</div>
37<div class="form-holder">
38<input type="password" placeholder="Create a password" class="form-control">
39</div>
40</section>
41
42<h4></h4>
43<section>
44<div class="grid">
45<div class="row">
46<a href="#" class="grid-item" style="background-image: url(https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/programming-bg.jpg);">
47<div class="inner">
48<img src="https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/programming.png" alt="">
49<span>Programming</span>
50</div>
51</a>
52<a href="#" class="grid-item" style="background-image: url('https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/research-bg.jpg');">
53<div class="inner">
54<img src="https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/research.png" alt="">
55<span>Research</span>
56</div>
57</a>
58<a href="#" class="grid-item" style="background-image: url('https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/teacher-bg.jpg');">
59<div class="inner">
60<img src="https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/teacher.png" alt="">
61<span>Teacher</span>
62</div>
63</a>
64</div>
65<div class="row">
66<a href="#" class="grid-item" style="background-image: url('images/tour-guide-bg.jpg');">
67<div class="inner">
68<img src="https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/tour-guide.png" alt="">
69<span>Tour Guide</span>
70</div>
71</a>
72<a href="#" class="grid-item" style="background-image: url('https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/business-bg.jpg');">
73<div class="inner">
74<img src="https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/business.png" alt="">
75<span>Business</span>
76</div>
77</a>
78<a href="#" class="grid-item" style="background-image: url('https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/artist-bg.jpg');">
79<div class="inner">
80<img src="https://colorlib.com/etc/bwiz/colorlib-wizard-6/images/artist.png" alt="">
81<span>Artist</span>
82</div>
83</a>
84</div>
85</div>
86</section>
87
88<h4></h4>
89<section>
90<div class="row g-2">
91<div class="form-holder">
92<input type="text" placeholder="Street Name" class="form-control">
93</div>
94<div class="form-holder">
95<input type="text" placeholder="Street Number" class="form-control">
96</div>
97</div>
98<div class="row g-2">
99<div class="form-holder">
100<input type="text" placeholder="City" class="form-control">
101</div>
102<div class="form-holder">
103<input type="text" placeholder="Country" class="form-control">
104</div>
105</div>
106</section>
107</div>
108</form>
109</div>
110<script src="https://colorlib.com/etc/bwiz/colorlib-wizard-6/js/jquery-3.3.1.min.js"></script>
111
112<script src="https://colorlib.com/etc/bwiz/colorlib-wizard-6/js/jquery.steps.js"></script>
113<script src="https://colorlib.com/etc/bwiz/colorlib-wizard-6/js/main.js"></script>
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.
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.
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.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
47
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.