Login page Bootstrap 5

Forms Bootstrap 5Free

Free Bootstrap 5 form snippet — Login page Bootstrap 5. Preview, copy HTML, drop it into any Bootstrap 5 project.

2.1k views22 downloads4 years ago

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

Source Code

1<!doctype html>
2<html lang="en">
3
4<head>
5  <!-- Required meta tags -->
6  <meta charset="utf-8">
7  <meta name="viewport" content="width=device-width, initial-scale=1">
8  <!-- Bootstrap CSS -->
9  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
10  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
11  <title>Bootstrap 5 - simple login form</title>
12</head>
13
14<body>
15  <div class="container-full">
16    <div class="row g-0">
17      <div class="col-12">
18        <div class="text-center">
19          <h1 class="text-center bg-secondary p-2 text-white">Login page</h1>
20          <a href="#" class="p-2 fs-3 border-bottom">Back </a>
21        </div>
22      </div>
23    </div>
24  </div>
25
26  <div class="container">
27    <form class="row g-2 mt-4">
28      <div class="col-12 col-md-8 col-lg-6 mx-auto">
29        <div class="input-group mb-3">
30          <span class="input-group-text" id="email-addon">@</span>
31          <input type="email" class="form-control" id="email" name="email" placeholder="E-mail" aria-label="email" aria-describedby="email-addon" required>
32        </div>
33
34        <div class="input-group mb-3">
35          <span class="input-group-text" id="password-addon"><i class="bi bi-key-fill"></i></span>
36          <input type="password" class="form-control" id="password" name="password" placeholder="Password" aria-label="password" aria-describedby="email-addon" required>
37        </div>
38
39        <button type="submit" class="p-2 px-4 btn btn-success w-100" name="button" id="button">Login</button>
40        <hr>
41        <a href="#" class="float-end text-danger"> Reset password?</a>
42      </div>
43    </form>
44
45    <div class="row">
46      <div class="col-12 col-md-8 col-lg-6 mx-auto">
47        <div class="d-flex justify-content-between mt-3">
48          <span class="fs-2 bg-secondary p-1 px-4 rounded text-white"><i class="bi bi-facebook"></i></span>
49          <span class="fs-2 bg-secondary p-1 px-4 rounded text-white"><i class="bi bi-twitter"></i></span>
50          <span class="fs-2 bg-secondary p-1 px-4 rounded text-white"><i class="bi bi-google"></i></span>
51        </div>
52      </div>
53    </div>
54
55  </div>
56
57  <div class="container-full">
58    <div class="row g-0">
59      <div class="col-12">
60        <p class="text-center  p-2 mt-5">Thanks!</p>
61      </div>
62    </div>
63  </div>
64
65  <!-- Optional JavaScript; choose one of the two! -->
66
67  <!-- Option 1: Bootstrap Bundle with Popper -->
68  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
69
70  <!-- Option 2: Separate Popper and Bootstrap JS -->
71  <!--
72    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
73    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
74    -->
75</body>
76
77</html>
78

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="en"> 3 4<head> 5  6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8  9 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> 11 <title>Bootstrap 5 - simple login form</title> 12</head> 13 14<body> 15 <div class="container-full"> 16 <div class="row g-0"> 17 <div class="col-12"> 18 <div class="text-center"> 19 <h1 class="text-center bg-secondary p-2 text-white">Login page</h1> 20 <a href="#" class="p-2 fs-3 border-bottom">Back </a> 21 </div> 22 </div> 23 </div> 24 </div> 25 26 <div class="container"> 27 <form class="row g-2 mt-4"> 28 <div class="col-12 col-md-8 col-lg-6 mx-auto"> 29 <div class="input-group mb-3"> 30 <span class="input-group-text" id="email-addon">@</span> 31 <input type="email" class="form-control" id="email" name="email" placeholder="E-mail" aria-label="email" aria-describedby="email-addon" required> 32 </div> 33 34 <div class="input-group mb-3"> 35 <span class="input-group-text" id="password-addon"><i class="bi bi-key-fill"></i></span> 36 <input type="password" class="form-control" id="password" name="password" placeholder="Password" aria-label="password" aria-describedby="email-addon" required> 37 </div> 38 39 <button type="submit" class="p-2 px-4 btn btn-success w-100" name="button" id="button">Login</button> 40 <hr> 41 <a href="#" class="float-end text-danger"> Reset password?</a> 42 </div> 43 </form> 44 45 <div class="row"> 46 <div class="col-12 col-md-8 col-lg-6 mx-auto"> 47 <div class="d-flex justify-content-between mt-3"> 48 <span class="fs-2 bg-secondary p-1 px-4 rounded text-white"><i class="bi bi-facebook"></i></span> 49 <span class="fs-2 bg-secondary p-1 px-4 rounded text-white"><i class="bi bi-twitter"></i></span> 50 <span class="fs-2 bg-secondary p-1 px-4 rounded text-white"><i class="bi bi-google"></i></span> 51 </div> 52 </div> 53 </div> 54 55 </div> 56 57 <div class="container-full"> 58 <div class="row g-0"> 59 <div class="col-12"> 60 <p class="text-center p-2 mt-5">Thanks!</p> 61 </div> 62 </div> 63 </div> 64 65  66 67  68 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> 69 70  71  75</body> 76 77</html> 78