→ 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

3.9k

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

6.4k

v.4.6
Bootstrap 5 Login Modal

Author:
Anonymous

1 year ago

11.5k

v.5.3
Bootstrap Login Modal
Elegant Login Form

Author:
Mateo Rojas

8 months ago

6k

v.5.3
Success modal

Author:
Alaric Sloane

11 months ago

3.5k

v.5.3
Login form with social login buttons

Author:
Juan Martinez

1 year ago

6.2k

v.5.3
Delete Confirmation Modal

Author:
Alaric Sloane

11 months ago

13.3k

v.5.3
Form Wave
Form Wave

Author:
Rami AlAjo

6 months ago

1k

v.4.6
Simple Login form

Author:
Prajwal Hallale

1 year ago

7.5k

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

Author:
Prajwal Hallale

1 year ago

7.1k

v.5.3
Simple login form

Author:
Prajwal Hallale

1 year ago

6.9k

v.4.6
bootstrap 5 confirm modal

Author:
Anonymous

8 months ago

5.9k

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

1 year ago

6.3k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent