How to create login page in bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Create a Login Page in Bootstrap Quickly

To create a login page in Bootstrap, use a form with form-control inputs for username and password, and a btn button for submission. Wrap the form inside a container and use Bootstrap's grid or flex utilities to center it on the page.

📐

Syntax

A basic Bootstrap login form uses a <form> element containing input fields with the class form-control for styling. Buttons use the class btn with color variants like btn-primary. The form is placed inside a container or container-fluid for proper padding and alignment.

form-control: styles input fields
btn btn-primary: styles the submit button
container: centers content with padding
d-flex justify-content-center align-items-center: flex utilities to center form vertically and horizontally

html

<form>
  <div class="mb-3">
    <label for="inputEmail" class="form-label">Email address</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
  </div>
  <div class="mb-3">
    <label for="inputPassword" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Login</button>
</form>

💻

Example

This example shows a complete login page using Bootstrap 5. It centers the form vertically and horizontally, includes email and password fields, and a login button. The page is responsive and looks clean on all screen sizes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Login Page</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body, html {
      height: 100%;
    }
  </style>
</head>
<body class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div class="container" style="max-width: 400px;">
    <h2 class="mb-4 text-center">Login</h2>
    <form>
      <div class="mb-3">
        <label for="inputEmail" class="form-label">Email address</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Enter email" required>
      </div>
      <div class="mb-3">
        <label for="inputPassword" class="form-label">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
      </div>
      <button type="submit" class="btn btn-primary w-100">Login</button>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A centered login form with a heading 'Login', two input fields labeled 'Email address' and 'Password', and a full-width blue 'Login' button below them.

⚠️

Common Pitfalls

Common mistakes when creating a Bootstrap login page include:

Not using form-control class on inputs, which breaks styling.
Forgetting to include the Bootstrap CSS link, so styles don't apply.
Not centering the form properly, making it look unbalanced.
Missing required attributes on inputs, which helps with basic validation.
Using fixed widths without responsiveness, causing layout issues on small screens.

html

<!-- Wrong: Missing form-control class -->
<input type="email" id="email" placeholder="Email">

<!-- Right: With form-control class -->
<input type="email" class="form-control" id="email" placeholder="Email">

📊

Quick Reference

Remember these key Bootstrap classes for login forms:

form-control: styles input fields
btn btn-primary: styles buttons
container: adds padding and centers content
d-flex justify-content-center align-items-center: centers content vertically and horizontally
mb-3: adds margin below form groups

✅

Key Takeaways

Use Bootstrap's form-control class to style input fields for a clean look.

Center your login form using Bootstrap's flexbox utilities for better user experience.

Include required attributes on inputs for simple validation.

Always link Bootstrap CSS and JS files to apply styles and components.

Make the login button full width with btn and w-100 classes for easy clicking.