Bootstrap 5 Login Form UI Design snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.
1<section class="body">
2 <div class="container">
3 <div class="login-box">
4 <div class="row">
5 <div class="col-sm-6">
6 <div class="logo">
7 <span class="logo-font">Go</span>Snippets
8 </div>
9 </div>
10 </div>
11 <div class="row">
12 <div class="col-sm-6">
13 <br>
14 <h3 class="header-title">LOGIN</h3>
15 <form class="login-form">
16 <div class="mb-3">
17 <input type="text" class="form-control" placeholder="Email or UserName">
18 </div>
19 <div class="mb-3">
20 <input type="Password" class="form-control" placeholder="Password">
21 <a href="#!" class="forgot-password">Forgot Password?</a>
22 </div>
23 <div class="mb-3">
24 <button class="btn btn-primary w-100">LOGIN</button>
25 </div>
26 <div class="mb-3">
27 <div class="text-center">New Member? <a href="#!">Sign up Now</a></div>
28 </div>
29 </form>
30 </div>
31 <div class="col-sm-6 hide-on-mobile">
32 <div id="demo" class="carousel slide" data-bs-ride="carousel">
33 <!-- Indicators -->
34 <ul class="carousel-indicators">
35 <li data-bs-target="#demo" data-bs-slide-to="0" class="active"></li>
36 <li data-bs-target="#demo" data-bs-slide-to="1"></li>
37 </ul>
38 <!-- The slideshow -->
39 <div class="carousel-inner">
40 <div class="carousel-item active">
41 <div class="slider-feature-card">
42 <img src="https://i.imgur.com/YMn8Xo1.png" alt="">
43 <h3 class="slider-title">Title Here</h3>
44 <p class="slider-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, odio!</p>
45 </div>
46 </div>
47 <div class="carousel-item">
48 <div class="slider-feature-card">
49 <img src="https://i.imgur.com/Yi5KXKM.png" alt="">
50 <h3 class="slider-title">Title Here</h3>
51 <p class="slider-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, debitis?</p>
52 </div>
53 </div>
54 </div>
55 <!-- Left and right controls -->
56 <a class="carousel-control-prev" href="#demo" data-bs-slide="prev">
57 <span class="carousel-control-prev-icon"></span>
58 </a>
59 <a class="carousel-control-next" href="#demo" data-bs-slide="next">
60 <span class="carousel-control-next-icon"></span>
61 </a>
62 </div>
63 </div>
64 </div>
65 </div>
66 </div>
67 </section>
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 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.
Bootstrap 5 Dual Design Registration Form snippets
Bootstrap 5 Dual Design Registration Form snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.