Bootstrap 5 Fancy login form with Facebook

Forms Bootstrap 5Free+ CSS

Bootstrap 5 Fancy login form with Facebook: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.

7.0k views276 downloads6 years ago

gosnippets.com/preview/bootstrap-5-fancy-login-form-with-facebook

Source Code

1<div class="container bg-white pb-5">
2    <div class="row d-flex justify-content-start align-items-center mt-sm-5">
3        <div class="col-lg-5 col-10">
4            <div id="circle"></div>
5            <div class="pb-5"> <img src="https://img.freepik.com/free-vector/authentication-concept-illustration_114360-2168.jpg?size=338&ext=jpg&ga=GA1.2.777073396.1599399655" alt=""> </div>
6        </div>
7        <div class="col-lg-4 offset-lg-2 col-md-6 offset-md-3">
8            <div class="pt-4">
9                <h6><span class="fa fa-superpowers text-primary px-md-2"></span>COMPANY LOGO</h6>
10            </div>
11            <div class="mt-3 mt-md-5">
12                <h5>Log in to your account</h5>
13                <form class="pt-4">
14                    <div class="d-flex flex-column pb-3"> <label for="email">Email Address</label> <input type="email" name="email" id="emailId" class="border-bottom border-primary"> </div>
15                    <div class="d-flex flex-column pb-3"> <label for="password">Password</label> <input type="password" name="passwrd" id="pwd" class="border-bottom border-primary"> </div>
16                    <div class="d-flex jusity-content-end pb-4">
17                        <div class="ms-auto"> <a href="#" class="text-danger text-decoration-none">Forgot password?</a> </div>
18                    </div> <input type="button" value="Log in" class="btn btn-primary w-100 mb-3"> <button class="btn w-100 bg-white border border-primary rounded "><span class="fa fa-facebook-official text-primary px-2"></span>Log In with Facebook</button>
19                    <div class="register mt-5">
20                        <p>Don't have an account? <a href="#">Create an account</a></p>
21                    </div>
22                </form>
23            </div>
24        </div>
25    </div>
26</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.

1<div class="container bg-white pb-5"> 2 <div class="row d-flex justify-content-start align-items-center mt-sm-5"> 3 <div class="col-lg-5 col-10"> 4 <div id="circle"></div> 5 <div class="pb-5"> <img src="https://img.freepik.com/free-vector/authentication-concept-illustration_114360-2168.jpg?size=338&ext=jpg&ga=GA1.2.777073396.1599399655" alt=""> </div> 6 </div> 7 <div class="col-lg-4 offset-lg-2 col-md-6 offset-md-3"> 8 <div class="pt-4"> 9 <h6><span class="fa fa-superpowers text-primary px-md-2"></span>COMPANY LOGO</h6> 10 </div> 11 <div class="mt-3 mt-md-5"> 12 <h5>Log in to your account</h5> 13 <form class="pt-4"> 14 <div class="d-flex flex-column pb-3"> <label for="email">Email Address</label> <input type="email" name="email" id="emailId" class="border-bottom border-primary"> </div> 15 <div class="d-flex flex-column pb-3"> <label for="password">Password</label> <input type="password" name="passwrd" id="pwd" class="border-bottom border-primary"> </div> 16 <div class="d-flex jusity-content-end pb-4"> 17 <div class="ms-auto"> <a href="#" class="text-danger text-decoration-none">Forgot password?</a> </div> 18 </div> <input type="button" value="Log in" class="btn btn-primary w-100 mb-3"> <button class="btn w-100 bg-white border border-primary rounded "><span class="fa fa-facebook-official text-primary px-2"></span>Log In with Facebook</button> 19 <div class="register mt-5"> 20 <p>Don't have an account? <a href="#">Create an account</a></p> 21 </div> 22 </form> 23 </div> 24 </div> 25 </div> 26</div>