Bootstrap and material design multi-forms snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.
1 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
2<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
3<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css'>
4<body class="hm-gradient">
5
6 <main>
7
8 <!--MDB Forms-->
9 <div class="container mt-4">
10
11 <!-- Grid row -->
12 <div class="row">
13 <!-- Grid column -->
14 <div class="col-md-6 mb-4">
15 <div class="card">
16 <div class="card-body">
17 <h3 class="text-center default-text py-3"><i class="fa fa-lock"></i> Login:</h3>
18 <!--Body-->
19 <div class="md-form">
20 <i class="fa fa-envelope prefix grey-text"></i>
21 <input type="text" id="defaultForm-email" class="form-control">
22 <label for="defaultForm-email">Your email</label>
23 </div>
24 <div class="md-form">
25 <i class="fa fa-lock prefix grey-text"></i>
26 <input type="password" id="defaultForm-pass" class="form-control">
27 <label for="defaultForm-pass">Your password</label>
28 </div>
29 <div class="text-center">
30 <button class="btn btn-default waves-effect waves-light">next</button>
31 </div>
32 </div>
33 </div>
34 </div>
35 <!-- Grid column -->
36 <!-- Grid column -->
37 <div class="col-md-6 mb-4">
38 <div class="card indigo form-white">
39 <div class="card-body">
40 <h3 class="text-center white-text py-3"><i class="fa fa-user"></i> Login:</h3>
41 <!--Body-->
42 <div class="md-form">
43 <i class="fa fa-envelope prefix white-text"></i>
44 <input type="text" id="defaultForm-email1" class="form-control">
45 <label for="defaultForm-email1">Your email</label>
46 </div>
47 <div class="md-form">
48 <i class="fa fa-lock prefix white-text"></i>
49 <input type="password" id="defaultForm-pass1" class="form-control">
50 <label for="defaultForm-pass1">Your password</label>
51 </div>
52 <div class="text-center">
53 <button class="btn btn-outline-white waves-effect waves-light">next</button>
54 </div>
55 </div>
56 </div>
57 </div>
58 <!-- Grid column -->
59 </div>
60 <!-- Grid row -->
61 <!-- Grid row -->
62 <div class="row">
63 <!-- Grid column -->
64 <div class="col-md-6 mb-4">
65 <div class="card ripe-malinka-gradient form-white">
66 <div class="card-body">
67 <!-- Form register -->
68 <form>
69 <h2 class="text-center font-up font-bold py-4 white-text">Sign up</h2>
70 <div class="md-form">
71 <i class="fa fa-user prefix white-text"></i>
72 <input type="text" id="orangeForm-name2" class="form-control">
73 <label for="orangeForm-name2">Your name</label>
74 </div>
75 <div class="md-form">
76 <i class="fa fa-envelope prefix white-text"></i>
77 <input type="text" id="orangeForm-email2" class="form-control">
78 <label for="orangeForm-email2">Your email</label>
79 </div>
80 <div class="md-form">
81 <i class="fa fa-lock prefix white-text"></i>
82 <input type="password" id="orangeForm-pass2" class="form-control">
83 <label for="orangeForm-pass2">Your password</label>
84 </div>
85 <div class="text-center">
86 <button class="btn btn-outline-white waves-effect waves-light">next</button>
87 </div>
88 </form>
89 <!-- Form register -->
90 </div>
91 </div>
92 </div>
93 <!-- Grid column -->
94 <!-- Grid column -->
95 <div class="col-md-6 mb-4">
96 <div class="card">
97 <div class="card-body">
98 <!-- Form register -->
99 <form>
100 <h2 class="text-center font-up font-bold deep-orange-text py-4">Sign up</h2>
101 <div class="md-form">
102 <i class="fa fa-user prefix grey-text"></i>
103 <input type="text" id="orangeForm-name3" class="form-control">
104 <label for="orangeForm-name3">Your name</label>
105 </div>
106 <div class="md-form">
107 <i class="fa fa-envelope prefix grey-text"></i>
108 <input type="text" id="orangeForm-email3" class="form-control">
109 <label for="orangeForm-email3">Your email</label>
110 </div>
111 <div class="md-form">
112 <i class="fa fa-lock prefix grey-text"></i>
113 <input type="password" id="orangeForm-pass3" class="form-control">
114 <label for="orangeForm-pass3">Your password</label>
115 </div>
116 <div class="text-center">
117 <button class="btn btn-deep-orange">next<i class="fa fa-angle-double-right ps-2" aria-hidden="true"></i></button>
118 </div>
119 </form>
120 <!-- Form register -->
121 </div>
122 </div>
123 </div>
124 <!-- Grid column -->
125 </div>
126 <!-- Grid row -->
127 <!-- Grid row -->
128 <div class="row">
129 <!-- Grid column -->
130 <div class="col-md-6 mb-4">
131 <div class="card">
132 <div class="card-body">
133 <!-- Form contact -->
134 <form>
135 <h2 class="text-center py-4 font-bold font-up danger-text">Contact us</h2>
136 <div class="md-form">
137 <i class="fa fa-user prefix grey-text"></i>
138 <input type="text" id="form31" class="form-control">
139 <label for="form31">Your name</label>
140 </div>
141 <div class="md-form">
142 <i class="fa fa-envelope prefix grey-text"></i>
143 <input type="text" id="form21" class="form-control">
144 <label for="form21">Your email</label>
145 </div>
146 <div class="md-form">
147 <i class="fa fa-tag prefix grey-text"></i>
148 <input type="text" id="form321" class="form-control">
149 <label for="form341">Subject</label>
150 </div>
151 <div class="md-form">
152 <i class="fa fa-pencil prefix grey-text"></i>
153 <textarea type="text" id="form81" class="md-textarea" style="height: 100px"></textarea>
154 <label for="form81">Your message</label>
155 </div>
156 <div class="text-center">
157 <button class="btn btn-outline-danger btn-lg">Send</button>
158 </div>
159 </form>
160 <!-- Form contact -->
161 </div>
162 </div>
163 </div>
164 <!-- Grid column -->
165 <!-- Grid column -->
166 <div class="col-md-6 mb-4">
167 <div class="card bg-secondary form-white">
168 <div class="card-body">
169 <!-- Form contact -->
170 <form>
171 <h2 class="text-center py-4 font-bold font-up white-text">Contact us</h2>
172 <div class="md-form">
173 <i class="fa fa-user prefix white-text"></i>
174 <input type="text" id="form32" class="form-control">
175 <label for="form32">Your name</label>
176 </div>
177 <div class="md-form">
178 <i class="fa fa-envelope prefix white-text"></i>
179 <input type="text" id="form22" class="form-control">
180 <label for="form22">Your email</label>
181 </div>
182 <div class="md-form">
183 <i class="fa fa-tag prefix white-text"></i>
184 <input type="text" id="form322" class="form-control">
185 <label for="form342">Subject</label>
186 </div>
187 <div class="md-form">
188 <i class="fa fa-pencil prefix white-text"></i>
189 <textarea type="text" id="form82" class="md-textarea" style="height: 100px"></textarea>
190 <label for="form82">Your message</label>
191 </div>
192 <div class="text-center">
193 <button class="btn btn-info btn-lg">Send</button>
194 </div>
195 </form>
196 <!-- Form contact -->
197 </div>
198 </div>
199 </div>
200 <!-- Grid column -->
201 </div>
202 <!-- Grid row -->
203 <!-- Grid row -->
204 <div class="row">
205 <!-- Grid column -->
206 <div class="col-md-6 mb-4">
207 <div class="card near-moon-gradient form-white">
208 <div class="card-body">
209 <!-- Form subscription -->
210 <form>
211 <h3 class="text-center indigo-text font-bold py-4"><strong>Subscribe</strong></h3>
212 <div class="md-form">
213 <i class="fa fa-user prefix white-text"></i>
214 <input type="text" id="form35" class="form-control">
215 <label for="form35">Your name</label>
216 </div>
217 <div class="md-form">
218 <i class="fa fa-envelope prefix white-text"></i>
219 <input type="text" id="form25" class="form-control">
220 <label for="form25">Your email</label>
221 </div>
222 <div class="text-center py-4">
223 <button class="btn btn-indigo">Send <i class="fa fa-paper-plane-o ms-1"></i></button>
224 </div>
225 </form>
226 <!-- Form subscription -->
227 </div>
228 </div>
229 </div>
230 <!-- Grid column -->
231 <!-- Grid column -->
232 <div class="col-md-6 mb-4">
233 <div class="card">
234 <div class="card-body">
235 <!-- Form register -->
236 <form>
237 <h3 class="text-center pink-text font-bold py-4"><strong>Subscribe</strong></h3>
238 <div class="md-form">
239 <i class="fa fa-user prefix grey-text"></i>
240 <input type="text" id="orangeForm-name37" class="form-control">
241 <label for="orangeForm-name37">Your name</label>
242 </div>
243 <div class="md-form">
244 <i class="fa fa-envelope prefix grey-text"></i>
245 <input type="text" id="orangeForm-email37" class="form-control">
246 <label for="orangeForm-email37">Your email</label>
247 </div>
248 <div class="text-center py-4">
249 <button class="btn btn-outline-pink">Send <i class="fa fa-paper-plane-o ms-1"></i></button>
250 </div>
251 </form>
252 <!-- Form register -->
253 </div>
254 </div>
255 </div>
256 <!-- Grid column -->
257 </div>
258 <!-- Grid row -->
259
260
261
262 </div>
263 <!--MDB Forms-->
264
265 </main>
266
267</body>
268
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
57
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.