→ Juan Martinez
→ Login form with social login buttons

Login form with social login buttons

This bootstrap css example is contributed by Juan Martinez, on 15-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Register, Sign in,Social media links,

Tags: Login Form Social media buttons

Author Juan Martinez

v.5.3

Fork Fullscreen

<div class="container">
    <div class="row justify-content-center mt-5">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title text-center">Login</h3>
                    <div class="d-grid gap-2 mb-3">
                        <a href="#" class="btn btn-social btn-google">
                            <i class="bi bi-google me-2"></i> Sign in with Google
                        </a>
                        <a href="#" class="btn btn-social btn-facebook">
                            <i class="bi bi-facebook me-2"></i> Sign in with Facebook
                        </a>
                        <a href="#" class="btn btn-social btn-twitter">
                            <i class="bi bi-twitter me-2"></i> Sign in with Twitter
                        </a>
                    </div>
                    <p class="divider-text">
                        <span class="bg-light">OR</span>
                    </p>
                    <form>
                        <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="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="rememberMe">
                            <label class="form-check-label" for="rememberMe">Remember me</label>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">Login</button>
                        </div>
                    </form>
                    <div class="text-center mt-3">
                        <a href="#" class="text-decoration-none">Forgot password?</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Simple login form

Author:
Prajwal Hallale

1 year ago

5.3k

v.4.6
Simple Login form

Author:
Prajwal Hallale

1 year ago

5.7k

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.9k

v.4.6
Social media buttons
Beautiful and simple social media buttons

Author:
Maria Garcia

10 months ago

2.6k

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.7k

v.4.6
Login with google button bootstrap
Sign in with the Google button

Author:
Omar Khaled

9 months ago

3.1k

v.5.3
Login modal

Author:
Prajwal Hallale

1 year ago

5.3k

v.4.6
Login with Twitter button bootstrap
Twitter (now known as X) Sign-in Button

Author:
Omar Khaled

9 months ago

1.9k

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

Author:
Prajwal Hallale

11 months ago

5.6k

v.5.3
Bootstrap 5 Login Modal

Author:
Anonymous

10 months ago

9.1k

v.5.3
Form Wave
Form Wave

Author:
Rami AlAjo

3 months ago

434

v.4.6
Bootstrap Login Modal
Elegant Login Form

Author:
Mateo Rojas

5 months ago

4.3k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent