Can I use "Login page Bootstrap 5" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Login page Bootstrap 5 — Free Forms Snippet (Bootstrap 5)

Loading…

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

Login page Bootstrap 5

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Forms snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Nordic Slate Dashboard Tile with Cinematic KPI & Sparkline

Cyberpunk Neon Toasts with Orbiting Glow and Progress

Electric Forest Data Insights Dashboard with Hoverable KPI Tiles