Forms Bootstrap 5Free+ CSS
Bootstrap 5 Dual Design Registration Form snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.
17.2k views1.6k downloads
gosnippets.com/preview/bootstrap-5-dual-design-registration-form-snippets
Source Code
1<div class="container register">
2 <div class="row">
3 <div class="col-md-3 register-left">
4 <img src="https://image.ibb.co/n7oTvU/logo_white.png" alt=""/>
5 <h3>Welcome</h3>
6 <p>You are 30 seconds away from earning your own money!</p>
7 <input type="submit" name="" value="Login"/><br/>
8 </div>
9 <div class="col-md-9 register-right">
10 <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
11 <li class="nav-item">
12 <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Employee</a>
13 </li>
14 <li class="nav-item">
15 <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Hirer</a>
16 </li>
17 </ul>
18 <div class="tab-content" id="myTabContent">
19 <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
20 <h3 class="register-heading">Apply as a Employee</h3>
21 <div class="row register-form">
22 <div class="col-md-6">
23 <div class="mb-3">
24 <input type="text" class="form-control" placeholder="First Name *" value="" />
25 </div>
26 <div class="mb-3">
27 <input type="text" class="form-control" placeholder="Last Name *" value="" />
28 </div>
29 <div class="mb-3">
30 <input type="password" class="form-control" placeholder="Password *" value="" />
31 </div>
32 <div class="mb-3">
33 <input type="password" class="form-control" placeholder="Confirm Password *" value="" />
34 </div>
35 <div class="mb-3">
36 <div class="maxl">
37 <label class="radio inline">
38 <input type="radio" name="gender" value="male" checked>
39 <span> Male </span>
40 </label>
41 <label class="radio inline">
42 <input type="radio" name="gender" value="female">
43 <span>Female </span>
44 </label>
45 </div>
46 </div>
47 </div>
48 <div class="col-md-6">
49 <div class="mb-3">
50 <input type="email" class="form-control" placeholder="Your Email *" value="" />
51 </div>
52 <div class="mb-3">
53 <input type="text" minlength="10" maxlength="10" name="txtEmpPhone" class="form-control" placeholder="Your Phone *" value="" />
54 </div>
55 <div class="mb-3">
56 <select class="form-control">
57 <option class="hidden" selected disabled>Please select your Sequrity Question</option>
58 <option>What is your Birthdate?</option>
59 <option>What is Your old Phone Number</option>
60 <option>What is your Pet Name?</option>
61 </select>
62 </div>
63 <div class="mb-3">
64 <input type="text" class="form-control" placeholder="Enter Your Answer *" value="" />
65 </div>
66 <input type="submit" class="btnRegister" value="Register"/>
67 </div>
68 </div>
69 </div>
70 <div class="tab-pane fade show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
71 <h3 class="register-heading">Apply as a Hirer</h3>
72 <div class="row register-form">
73 <div class="col-md-6">
74 <div class="mb-3">
75 <input type="text" class="form-control" placeholder="First Name *" value="" />
76 </div>
77 <div class="mb-3">
78 <input type="text" class="form-control" placeholder="Last Name *" value="" />
79 </div>
80 <div class="mb-3">
81 <input type="email" class="form-control" placeholder="Email *" value="" />
82 </div>
83 <div class="mb-3">
84 <input type="text" maxlength="10" minlength="10" class="form-control" placeholder="Phone *" value="" />
85 </div>
86
87
88 </div>
89 <div class="col-md-6">
90 <div class="mb-3">
91 <input type="password" class="form-control" placeholder="Password *" value="" />
92 </div>
93 <div class="mb-3">
94 <input type="password" class="form-control" placeholder="Confirm Password *" value="" />
95 </div>
96 <div class="mb-3">
97 <select class="form-control">
98 <option class="hidden" selected disabled>Please select your Sequrity Question</option>
99 <option>What is your Birthdate?</option>
100 <option>What is Your old Phone Number</option>
101 <option>What is your Pet Name?</option>
102 </select>
103 </div>
104 <div class="mb-3">
105 <input type="text" class="form-control" placeholder="`Answer *" value="" />
106 </div>
107 <input type="submit" class="btnRegister" value="Register"/>
108 </div>
109 </div>
110 </div>
111 </div>
112 </div>
113 </div>
114
115 </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.
Sign in to join the conversation.