Web code

Follow us on Instagram for updates link
Home
CSS

Designing a Responsive Create Account Form with Bootstrap

Designing a Responsive Create Account Form with Bootstrap

Published on December 26, 2024

Bootstrap makes it easy to create responsive and mobile-friendly forms. In this post, we’ll design a "Create Account" form using Bootstrap's grid system and components, ensuring that the form looks great on all screen sizes.




HTML: Structure of the Create Account Form


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Create Account Form</title>

    <!-- Bootstrap CSS -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <div class="container mt-5">

        <div class="row justify-content-center">

            <div class="col-md-6">

                <div class="card">

                    <div class="card-header bg-primary text-white text-center">

                        <h3>Create Account</h3>

                    </div>

                    <div class="card-body">

                        <form>

                            <div class="mb-3">

                                <label for="username" class="form-label">Username</label>

                                <input type="text" class="form-control" id="username" placeholder="Enter your username" required>

                            </div>

                            <div class="mb-3">

                                <label for="email" class="form-label">Email Address</label>

                                <input type="email" class="form-control" id="email" placeholder="Enter your email" required>

                            </div>

                            <div class="mb-3">

                                <label for="password" class="form-label">Password</label>

                                <input type="password" class="form-control" id="password" placeholder="Enter your password" required>

                            </div>

                            <div class="mb-3">

                                <label for="confirm-password" class="form-label">Confirm Password</label>

                                <input type="password" class="form-control" id="confirm-password" placeholder="Confirm your password" required>

                            </div>

                            <button type="submit" class="btn btn-primary w-100">Create Account</button>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- Bootstrap JS -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

How It Works

1. Bootstrap Grid System: The form is wrapped in a responsive container and uses Bootstrap’s grid system to center it on the page.

2. Bootstrap Components: - The card component provides a clean and professional layout for the form. - Form controls are styled using Bootstrap’s form classes, making them responsive and consistent.

3. Responsive Design: The form adapts to different screen sizes, ensuring it looks great on desktops, tablets, and mobile devices.

Conclusion

Using Bootstrap, we designed a responsive "Create Account" form with minimal effort. You can extend this further by integrating it with a backend to handle user registration or by adding validation using JavaScript or backend technologies. Try it in your next project!