→ César Ferreira
→ Bootstrap Login Modal

Bootstrap Login Modal

Forked from> @mateo/bootstrap-login-modal

Elegant Login Form

This bootstrap css example is contributed by César Ferreira, on 10-Jan-2025. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Register, Sign in,popup,dialog

Tags: Login Form Modal

Author César Ferreira

2.5k

v.5.3

Fork Fullscreen

<div class="modal fade" id="loginModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Welcome Back!</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form>
            <div class="mb-3">
              <label class="form-label">Email address</label>
              <div class="input-group">
                <input type="email" class="form-control" placeholder="name@example.com">
                <span class="input-group-text">
                    <i class="fas fa-envelope"></i>
                  </span>
              </div>
            </div>

<div class="mb-3">
              <label class="form-label">Password</label>
              <div class="input-group">
                <input type="password" class="form-control" placeholder="Enter your password">
                <span class="input-group-text password-toggle">
                    <i class="fas fa-eye"></i>
                  </span>
              </div>
            </div>

<div class="form-check">
              <div>
                <input type="checkbox" class="form-check-input" id="remember">
                <label class="form-check-label" for="remember">Remember me</label>
              </div>
              <a href="#" class="text-decoration-none">Esqueceu a palavra passe?</a>
            </div>

<div class="divider">
              <span>or continue with</span>
            </div>

<div class="social-login">
              <button type="button" class="btn btn-social">
                  <i class="fab fa-google"></i>Google
                </button>
              <button type="button" class="btn btn-social">
                  <i class="fab fa-facebook-f"></i>Facebook
                </button>
            </div>

<div class="register-link">
              Don't have an account? <a href="#" class="text-decoration-none">Register now</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

More Examples

Login modal

Author:
Prajwal Hallale

1 year ago

5.2k

v.4.6
Bootstrap 5 Login Modal

Author:
Anonymous

10 months ago

8.9k

v.5.3
Bootstrap Login Modal
Elegant Login Form

Author:
Mateo Rojas

5 months ago

4.1k

v.5.3
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

8 months ago

4.8k

v.4.6
Sign in form with bootstrap 5
Beautiful sign-in card with Bootstrap 5

Author:
Prajwal Hallale

11 months ago

5.5k

v.5.3
Login Form with input field validation, and display error or success messages using only HTML, CSS, and Bootstrap, you can follow this approach.
HTML: Form Structure: Contains fields for username and password with validation attributes (required, minlength). Feedback Messages: Placeholder div for dynamic error messages. CSS: Background Gradient: Applied to the body. Card Styling: Rounded corners and centered layout. Button Styling: Custom colors for the submit button. Validation Styling: Borders and error message styling. JavaScript: Validation Logic: Basic client-side validation to check if fields are empty or meet minimum length requirements. Feedback Messages: Display appropriate error or success messages based on validation.

Author:
zobaidul kaziex

8 months ago

4.6k

v.4.6
Simple login form

Author:
Prajwal Hallale

1 year ago

5.2k

v.4.6
bootstrap 5 confirm modal

Author:
Anonymous

5 months ago

4k

v.5.3
Success modal

Author:
Alaric Sloane

7 months ago

2.1k

v.5.3
Form Wave
Form Wave

Author:
Rami AlAjo

3 months ago

406

v.4.6
Delete Confirmation Modal

Author:
Alaric Sloane

7 months ago

9.4k

v.5.3
Login form with social login buttons

Author:
Juan Martinez

10 months ago

4.9k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent