Bootstrap 5 simple login form with social login

Forms Bootstrap 5Free+ CSS

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

37.8k views2.7k downloads5 years ago

gosnippets.com/preview/bootstrap-5-simple-login-form-with-social-login

Source Code

1<div class="container">
2    <div class="row">
3        <div class="offset-md-2 col-lg-5 col-md-7 offset-lg-4 offset-md-3">
4            <div class="panel border bg-white">
5                <div class="panel-heading">
6                    <h3 class="pt-3 font-weight-bold">Login</h3>
7                </div>
8                <div class="panel-body p-3">
9                    <form action="login_script.php" method="POST">
10                        <div class="mb-3 py-2">
11                            <div class="input-field"> <span class="far fa-user p-2"></span> <input type="text" placeholder="Username or Email" required> </div>
12                        </div>
13                        <div class="mb-3 py-1 pb-2">
14                            <div class="input-field"> <span class="fas fa-lock px-2"></span> <input type="password" placeholder="Enter your Password" required> <button class="btn bg-white text-muted"> <span class="far fa-eye-slash"></span> </button> </div>
15                        </div>
16                        <div class="d-flex flex-wrap align-items-center"> <input type="checkbox" name="remember" id="remember"> <label for="remember" class="text-muted">Remember me</label> <a href="#" id="forgot" class="font-weight-bold">Forgot password?</a> </div>
17                        <div class="btn btn-primary w-100 mt-3">Login</div>
18                        <div class="text-center pt-4 text-muted">Don't have an account? <a href="#">Sign up</a> </div>
19                    </form>
20                </div>
21                <div class="mx-3 my-2 py-2 bordert">
22                    <div class="text-center py-3"> <a href="https://wwww.facebook.com" target="_blank" class="px-2"> <img src="https://www.dpreview.com/files/p/articles/4698742202/facebook.jpeg" alt=""> </a> <a href="https://www.google.com" target="_blank" class="px-2"> <img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" alt=""> </a> <a href="https://www.github.com" target="_blank" class="px-2"> <img src="https://www.freepnglogos.com/uploads/512x512-logo-png/512x512-logo-github-icon-35.png" alt=""> </a> </div>
23                </div>
24            </div>
25        </div>
26    </div>
27</div>

More Forms snippets

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 →

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.

FormsView →

Comments(0)

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

1<div class="container"> 2 <div class="row"> 3 <div class="offset-md-2 col-lg-5 col-md-7 offset-lg-4 offset-md-3"> 4 <div class="panel border bg-white"> 5 <div class="panel-heading"> 6 <h3 class="pt-3 font-weight-bold">Login</h3> 7 </div> 8 <div class="panel-body p-3"> 9 <form action="login_script.php" method="POST"> 10 <div class="mb-3 py-2"> 11 <div class="input-field"> <span class="far fa-user p-2"></span> <input type="text" placeholder="Username or Email" required> </div> 12 </div> 13 <div class="mb-3 py-1 pb-2"> 14 <div class="input-field"> <span class="fas fa-lock px-2"></span> <input type="password" placeholder="Enter your Password" required> <button class="btn bg-white text-muted"> <span class="far fa-eye-slash"></span> </button> </div> 15 </div> 16 <div class="d-flex flex-wrap align-items-center"> <input type="checkbox" name="remember" id="remember"> <label for="remember" class="text-muted">Remember me</label> <a href="#" id="forgot" class="font-weight-bold">Forgot password?</a> </div> 17 <div class="btn btn-primary w-100 mt-3">Login</div> 18 <div class="text-center pt-4 text-muted">Don't have an account? <a href="#">Sign up</a> </div> 19 </form> 20 </div> 21 <div class="mx-3 my-2 py-2 bordert"> 22 <div class="text-center py-3"> <a href="https://wwww.facebook.com" target="_blank" class="px-2"> <img src="https://www.dpreview.com/files/p/articles/4698742202/facebook.jpeg" alt=""> </a> <a href="https://www.google.com" target="_blank" class="px-2"> <img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" alt=""> </a> <a href="https://www.github.com" target="_blank" class="px-2"> <img src="https://www.freepnglogos.com/uploads/512x512-logo-png/512x512-logo-github-icon-35.png" alt=""> </a> </div> 23 </div> 24 </div> 25 </div> 26 </div> 27</div>