Bootstrap 5 Login form with social buttons

Forms Bootstrap 5Free+ CSS

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

6.5k views140 downloads6 years ago

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

Source Code

1<div class="container">
2    <div class="row d-flex justify-content-center mt-5">
3        <div class="col-12 col-md-8 col-lg-6 col-xl-5">
4            <div class="card py-3 px-2">
5                <p class="text-center mb-3 mt-2">SE CONNECTER AVEC</p>
6                <div class="row mx-auto ">
7                    <div class="col-4"> <i class="fab fa-twitter"></i> </div>
8                    <div class="col-4"> <i class="fab fa-facebook"></i> </div>
9                    <div class="col-4"> <i class="fab fa-google"></i> </div>
10                </div>
11                <div class="division">
12                    <div class="row">
13                        <div class="col-3">
14                            <div class="line l"></div>
15                        </div>
16                        <div class="col-6"><span>OU AVEC MON EMAIL</span></div>
17                        <div class="col-3">
18                            <div class="line r"></div>
19                        </div>
20                    </div>
21                </div>
22                <form class="myform">
23                    <div class="mb-3"> <input type="email" class="form-control" placeholder="Email"> </div>
24                    <div class="mb-3"> <input type="password" class="form-control" placeholder="Mot de passe"> </div>
25                    <div class="row">
26                        <div class="col-md-6 col-12">
27                            <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Rester connecte</label> </div>
28                        </div>
29                        <div class="col-md-6 col-12 bn">Mot se passe oublie</div>
30                    </div>
31                    <div class="mb-3 mt-3"> <button type="button" class="btn w-100 btn-primary btn-lg"><small><i class="far fa-user pe-2"></i>Se connecter</small></button> </div>
32                </form>
33            </div>
34        </div>
35    </div>
36</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"> 2 <div class="row d-flex justify-content-center mt-5"> 3 <div class="col-12 col-md-8 col-lg-6 col-xl-5"> 4 <div class="card py-3 px-2"> 5 <p class="text-center mb-3 mt-2">SE CONNECTER AVEC</p> 6 <div class="row mx-auto "> 7 <div class="col-4"> <i class="fab fa-twitter"></i> </div> 8 <div class="col-4"> <i class="fab fa-facebook"></i> </div> 9 <div class="col-4"> <i class="fab fa-google"></i> </div> 10 </div> 11 <div class="division"> 12 <div class="row"> 13 <div class="col-3"> 14 <div class="line l"></div> 15 </div> 16 <div class="col-6"><span>OU AVEC MON EMAIL</span></div> 17 <div class="col-3"> 18 <div class="line r"></div> 19 </div> 20 </div> 21 </div> 22 <form class="myform"> 23 <div class="mb-3"> <input type="email" class="form-control" placeholder="Email"> </div> 24 <div class="mb-3"> <input type="password" class="form-control" placeholder="Mot de passe"> </div> 25 <div class="row"> 26 <div class="col-md-6 col-12"> 27 <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Rester connecte</label> </div> 28 </div> 29 <div class="col-md-6 col-12 bn">Mot se passe oublie</div> 30 </div> 31 <div class="mb-3 mt-3"> <button type="button" class="btn w-100 btn-primary btn-lg"><small><i class="far fa-user pe-2"></i>Se connecter</small></button> </div> 32 </form> 33 </div> 34 </div> 35 </div> 36</div>