Dark login page Bootstrap 5

Forms Bootstrap 5Free+ CSS

Free Bootstrap 5 form snippet — Dark login page Bootstrap 5. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

2.5k views26 downloads4 years ago

gosnippets.com/preview/dark-login-page-bootstrap-5

Source Code

1<!DOCTYPE html>
2<html lang="pt-br" dir="ltr">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7 
8  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
9  
10</head>
11
12<body>
13<!--  by https://hostcwb.com.br/tutoriais/ -->
14  <!-- Modal -->
15  <div id="login_modal" class="modal fade"  data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
16    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
17      <div class="modal-content bg-dark bg-gradient opacity-75">
18
19        <div class="modal-body">
20          <div class="row">
21            <div class="col-12 m-auto">
22              <div class="text-center">
23                <i class="d-block bi bi-person-circle text-white big-icon mb-3"></i>
24              </div>
25
26              <form class="row g-3">
27                <div class="col-12">
28                  <input type="text" class="form-control" name="" value="" placeholder="E-mail">
29                </div>
30                <div class="col-12">
31                  <input type="text" class="form-control" name="" value="" placeholder="password">
32                </div>
33                <div class="col-12">
34                  <button type="button" name="button" class="btn btn-dark float-end shadow-sm  bg-gradient fw-bolder px-5">Enter</button>
35                </div>
36              </form>
37
38            </div>
39          </div>
40        </div>
41        <div class="modal-footer justify-content-between text-white p-0 px-3">
42
43          <span> <a href="#">Reset password</a></span>
44          <span>Not a member yet? <a href="#">Sign Up</a>.</span>
45        </div>
46      </div>
47    </div>
48  </div>
49  <script>
50    window.addEventListener("load", function(event) {
51      let myModalElement = document.getElementById('login_modal');
52      let myModal = new bootstrap.Modal(myModalElement, {
53        keyboard: false
54      });
55      myModal.show();
56
57      console.log("Todos os recursos terminaram o carregamento!");
58    });
59  </script>
60</body>
61
62</html>
63

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<!DOCTYPE html> 2<html lang="pt-br" dir="ltr"> 3 4<head> 5 <meta charset="utf-8"> 6 <title></title> 7 8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> 9 10</head> 11 12<body> 13 14  15 <div id="login_modal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> 16 <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down"> 17 <div class="modal-content bg-dark bg-gradient opacity-75"> 18 19 <div class="modal-body"> 20 <div class="row"> 21 <div class="col-12 m-auto"> 22 <div class="text-center"> 23 <i class="d-block bi bi-person-circle text-white big-icon mb-3"></i> 24 </div> 25 26 <form class="row g-3"> 27 <div class="col-12"> 28 <input type="text" class="form-control" name="" value="" placeholder="E-mail"> 29 </div> 30 <div class="col-12"> 31 <input type="text" class="form-control" name="" value="" placeholder="password"> 32 </div> 33 <div class="col-12"> 34 <button type="button" name="button" class="btn btn-dark float-end shadow-sm bg-gradient fw-bolder px-5">Enter</button> 35 </div> 36 </form> 37 38 </div> 39 </div> 40 </div> 41 <div class="modal-footer justify-content-between text-white p-0 px-3"> 42 43 <span> <a href="#">Reset password</a></span> 44 <span>Not a member yet? <a href="#">Sign Up</a>.</span> 45 </div> 46 </div> 47 </div> 48 </div> 49 <script> 50 window.addEventListener("load", function(event) { 51 let myModalElement = document.getElementById('login_modal'); 52 let myModal = new bootstrap.Modal(myModalElement, { 53 keyboard: false 54 }); 55 myModal.show(); 56 57 console.log("Todos os recursos terminaram o carregamento!"); 58 }); 59 </script> 60</body> 61 62</html> 63