Bootstrap - Sign In Demo

Sign In Form with Bootstrap

In this tutorial, you will learn how to create a sign in form using Bootstrap. You will:

1. Design the form layout
2. Add form fields
3. Style the form with Bootstrap classes
4. Add Bootstrap components such as buttons and validation styles
5. Implement form functionality using JavaScript, including:
   • Form submission
   • Validation
   • User authentication
6. Customize the sign in form to match your application's branding and style

Designing the Sign In Form

To design the sign in form, create a container to hold the form elements. Use the <form> tag and add a class of container to center the form on the page. Inside the form, create a <div> element with the class row to use Bootstrap's grid system for layout.

Use Bootstrap classes to style the form. Add the class col-md-6 offset-md-3 to the <div> inside the form to set the form's width and center it horizontally. Apply the classes mt-5 for margin-top and p-4 for padding to give the form some spacing.

Add the form fields for email/username and password. Use the <input> tag with the type email or text for the email/username field and type password for the password field. Give each input a class of form-control to apply Bootstrap's default styling. Add <label> elements for each field to provide clear instructions to users.

To add a "Remember Me" checkbox, create an <input> with the type checkbox and a corresponding <label>. Wrap them inside a <div> with the class form-check to apply Bootstrap's checkbox styling.

Include a "Sign In" button using the <button> tag with the type submit. Apply the classes btn and btn-primary to style the button with Bootstrap's default primary color. Add any additional classes like mt-3 for margin-top to position the button as needed.

<form class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3 mt-5 p-4">
      <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email" required>
      </div>
      <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password" required>
      </div>
      <div class="form-check mb-3">
        <input type="checkbox" class="form-check-input" id="rememberMe">
        <label class="form-check-label" for="rememberMe">Remember Me</label>
      </div>
      <button type="submit" class="btn btn-primary mt-3">Sign In</button>
    </div>
  </div>
</form>

By using Bootstrap's classes for layout and styling, you can quickly create a well-designed sign in form that is responsive and visually appealing.

Enhancing the Form with Bootstrap Components

Bootstrap provides components and classes to improve the look and function of form elements. Let's apply Bootstrap styles to the form fields, use Bootstrap buttons for the "Sign In" action, implement form validation with Bootstrap classes, and show error messages for invalid inputs.

To style the form fields, add the class form-control to each <input> element. This class applies Bootstrap's default styling to the input fields, making them consistent and visually appealing. You can also use classes like is-valid and is-invalid to show the validation state of the form fields.

<div class="mb-3">
  <label for="email" class="form-label">Email address</label>
  <input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
  <label for="password" class="form-label">Password</label>
  <input type="password" class="form-control" id="password" required>
</div>

For the "Sign In" button, use the btn and btn-primary classes to apply Bootstrap's button styles. The btn class gives the button a default appearance, while btn-primary applies the primary color scheme. You can change the button further by adding classes or changing the styles using custom CSS.

<button type="submit" class="btn btn-primary">Sign In</button>

To implement form validation with Bootstrap classes, you can use the needs-validation class on the <form> element. This class enables the browser's built-in form validation. Also, you can add the required attribute to the form fields that are mandatory. Bootstrap will automatically apply the validation styles based on the form's state.

<form class="needs-validation" novalidate>
  <!-- Form fields -->
  <button type="submit" class="btn btn-primary">Sign In</button>
</form>

To show error messages for invalid inputs, you can use Bootstrap's invalid-feedback class. Create a <div> element with this class below each form field that requires validation. The error message will be shown when the form field is invalid.

<div class="mb-3">
  <label for="email" class="form-label">Email address</label>
  <input type="email" class="form-control" id="email" required>
  <div class="invalid-feedback">
    Please provide a valid email address.
  </div>
</div>

By applying these Bootstrap components and classes, your sign in form will have an improved look and integrated form validation. The form fields will have a consistent style, the "Sign In" button will be prominently displayed, and error messages will be shown for invalid inputs, guiding users to correctly fill in the form.

Implementing Form Functionality

To make the sign in form functional, add event listeners to the form submission, validate form inputs using JavaScript, handle form submission and user authentication, and redirect users upon successful sign in.

Add an event listener to the form submission. Use JavaScript to listen for the submit event on the <form> element. Inside the event listener, access the form data and perform necessary actions.

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  // Handle form submission
});

Validate the form inputs using JavaScript. Check if the email/username and password fields are not empty. Use the trim() method to remove any leading or trailing whitespace from the input values. If any of the fields are empty, display an error message to the user.

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const email = document.getElementById('email').value.trim();
  const password = document.getElementById('password').value.trim();

  if (email === '' || password === '') {
    alert('Please enter both email and password');
    return;
  }

  // Continue with form submission
});

After validating the form inputs, handle the form submission and user authentication. Send the email/username and password to the server-side script or API endpoint responsible for authentication. Use AJAX or the Fetch API to make an asynchronous request to the server.

form.addEventListener('submit', function(event) {
  // ...

  const data = {
    email: email,
    password: password
  };

  fetch('/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(result => {
    if (result.success) {
      // Authentication successful
      // Redirect or update UI
    } else {
      // Authentication failed
      alert('Invalid email or password');
    }
  })
  .catch(error => {
    console.error('Error:', error);
  });
});

Upon successful authentication, redirect the user to a different page or update the UI to reflect the authenticated state. Use JavaScript's window.location object to redirect the user to a specific URL.

fetch('/login', {
  // ...
})
.then(response => response.json())
.then(result => {
  if (result.success) {
    // Authentication successful
    window.location.href = '/dashboard';
  } else {
    // Authentication failed
    alert('Invalid email or password');
  }
})
// ...

Adapt the code examples to fit your specific backend implementation and requirements. You may need to adjust the server endpoints, data format, and response handling according to your application's architecture.

Customizing the Sign In Form

To make the sign in form match your application's branding and style, you can change the color scheme using Bootstrap themes, add custom CSS styles, and include branding elements like logos and typography.

Bootstrap provides themes that you can use to change the look of your sign in form. These themes modify the colors, styles, and components of Bootstrap. To use a theme, include the theme's CSS file in your HTML file after the main Bootstrap CSS file.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">

If you want more control over the styles, you can add custom CSS to change specific elements of the sign in form. Use CSS selectors to target the form elements and apply your desired styles.

form {
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background-color: #your-brand-color;
  border-color: #your-brand-color;
}

.btn-primary:hover {
  background-color: #your-darker-brand-color;
  border-color: #your-darker-brand-color;
}

To incorporate branding elements into the sign in form, you can add your application's logo above the form. Use an <img> tag to include the logo image and style it with CSS to adjust its size and position.

<form class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3 mt-5 p-4">
      <div class="text-center mb-4">
        <img src="your-logo.png" alt="Your Logo" class="logo">
      </div>
      <!-- Form fields -->
    </div>
  </div>
</form>

.logo {
  max-width: 200px;
  height: auto;
}

You can also apply your application's typography to the sign in form by using the font family and sizes that match your branding. Use CSS to specify the font family for the form elements and adjust the font sizes as needed.

body {
  font-family: 'Your Brand Font', sans-serif;
}

h2 {
  font-size: 28px;
  font-weight: bold;
}

.form-label {
  font-size: 16px;
}