→ Prajwal Hallale
→ Sign in form with bootstrap 5

Sign in form with bootstrap 5

Beautiful sign-in card with Bootstrap 5

This bootstrap css example is contributed by Prajwal Hallale, on 11-Jun-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Register, Sign in

Tags: Card Login Form

Author Prajwal Hallale

v.5.3

Fork Fullscreen

<body class="bg-light d-flex align-items-center justify-content-center">
    <div class="card shadow-lg w-100" style="max-width: 480px;">
        <div class="card-body">
            <div class="text-center">
                <h1 class="card-title h3">Sign in</h1>
                <p class="card-text text-muted">Sign in below to access your account</p>
            </div>
            <div class="mt-4">
                <form action="">
                    <div class="mb-4">
                        <label for="email" class="form-label text-muted">Email Address</label>
                        <input type="email" class="form-control" id="email" placeholder="Email Address" required>
                    </div>
                    <div class="mb-4">
                        <label for="password" class="form-label text-muted">Password</label>
                        <input type="password" class="form-control" id="password" placeholder="Password" required>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-dark btn-lg">Sign in</button>
                    </div>
                    <p class="text-center text-muted mt-4">Don't have an account yet?
                        <a href="#!" class="text-decoration-none">Sign up</a>.
                    </p>
                </form>
            </div>
        </div>
    </div>

More Examples

Sound Board
Sound Board

Author:
Rami AlAjo

10 months ago

1.3k

v.4.6
Bootstrap 5 Login Modal

Author:
Anonymous

1 year ago

13.5k

v.5.3
Product Card with Modal

Author:
java stories story

4 months ago

1.6k

v.5.3
Product Card
Card diseñada para mostrar productos de forma atractiva y ordenada, inspirada en Mercado Libre. Incluye imagen fija, título uniforme, precio anterior tachado, precio actual con descuento y etiquetas promocionales como "Envío gratis". Incorpora un efecto hover con sombra acentuada y usa clases CSS para fácil integración y mantenimiento.

Author:
Facundo Banegaz

10 months ago

1.1k

v.4.6
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

7.1k

v.4.6
Simple login form

Author:
Prajwal Hallale

1 year ago

7.6k

v.4.6
Card Layout
Using masonry in cards layout

Author:
almounkez

1 year ago

3.8k

v.5.3
addadfadadfadfadf
adfadfadf

Author:
Pranjal Adhikari

6 months ago

725

v.4.6
Product Modal with JS

Author:
java stories story

3 months ago

826

v.5.3
Expanding Cards
Expanding Cards

Author:
Rami AlAjo

10 months ago

3.8k

v.4.6
Login form with social login buttons

Author:
Juan Martinez

1 year ago

6.8k

v.5.3
User Profile Card with Bootstrap
How to Use: Replace Image URL: Update the src attribute of the img tag to the actual URL of the user’s image. Update Text: Change the text inside the h5 and p elements to reflect the user’s actual name and biography

Author:
zobaidul kaziex

1 year ago

2.5k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent