Lesson 56 of 60 – Bootstrap Registration Page Project
93%

Bootstrap Registration Page Project

In this practical project, we will create a responsive registration page using Bootstrap. You will learn how to combine Bootstrap forms, form controls, checkboxes, select boxes, buttons, cards, grid classes, spacing utilities, and responsive layouts to build a complete registration form.

Project Goal: Create a responsive registration page containing name, email, password, confirm password, phone number, gender, country, terms checkbox, register button, and login link.

1. Project Overview

A registration page allows a new user to create an account.

Our project will contain:

  • Responsive page layout.
  • Registration card.
  • Full name field.
  • Email field.
  • Phone number field.
  • Password field.
  • Confirm password field.
  • Gender selection.
  • Country selection.
  • Terms and conditions checkbox.
  • Register button.
  • Login link.

2. Create the HTML Document

Start with the standard HTML document.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>
        Registration Page
    </title>

</head>

<body>

    Registration Content

</body>

</html>

3. Add Bootstrap CSS

Include Bootstrap CSS inside the head section.

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

Bootstrap provides the grid system, forms, cards, buttons, spacing utilities, and responsive classes required for our project.

4. Create the Main Container

Use a responsive Bootstrap container.

<div
class="container
py-5">

    Registration Content

</div>

The py-5 utility adds vertical padding to the page.

5. Create the Responsive Row

Use Bootstrap's row and column system to control the width of the registration form.

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


    <div
    class="col-12
    col-sm-10
    col-md-8
    col-lg-7
    col-xl-6">


        Registration Form


    </div>


</div>

The form becomes wider on smaller screens and narrower on larger screens.

6. Create the Registration Card

Place the form inside a Bootstrap card.

<div
class="card
shadow-sm">


    <div
    class="card-body
    p-4">

        Registration Form

    </div>


</div>

The shadow-sm class adds a small shadow and p-4 provides comfortable internal spacing.

7. Add the Registration Heading

Add a heading and short description.

<div
class="text-center
mb-4">


    <h1>

        Create Account

    </h1>


    <p
    class="text-body-secondary">

        Register a new account

    </p>


</div>

8. Create the Full Name Field

Use form-label and form-control for the name field.

<div class="mb-3">


    <label
    for="name"
    class="form-label">

        Full Name

    </label>


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


</div>

9. Create the Email Field

Use an email input for the user's email address.

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

The email input type provides basic browser-level email validation.

10. Create the Phone Number Field

Create a phone number input.

<div class="mb-3">


    <label
    for="phone"
    class="form-label">

        Phone Number

    </label>


    <input
    type="tel"
    class="form-control"
    id="phone"
    placeholder="Enter your phone number"
    required>


</div>

The tel input type is suitable for telephone numbers. Additional validation should be handled by the application.

11. Create the Password Field

Use the password input type for creating a secure password.

<div class="mb-3">


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

        Password

    </label>


    <input
    type="password"
    class="form-control"
    id="password"
    placeholder="Create a password"
    required>


</div>

12. Create the Confirm Password Field

A registration form commonly asks users to enter their password twice.

<div class="mb-3">


    <label
    for="confirmPassword"
    class="form-label">

        Confirm Password

    </label>


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


</div>

The application should compare the two password values before creating the account.

13. Add Password Help Text

Use form-text to provide password requirements.

<div class="mb-3">


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

        Password

    </label>


    <input
    type="password"
    class="form-control"
    id="password">


    <div class="form-text">

        Use at least 8 characters.

    </div>


</div>

14. Create the Gender Radio Buttons

Radio buttons are useful when the user should choose one option from a group.

<label class="form-label">

    Gender

</label>


<div class="form-check">

    <input
    class="form-check-input"
    type="radio"
    name="gender"
    id="male"
    value="male">


    <label
    class="form-check-label"
    for="male">

        Male

    </label>

</div>


<div class="form-check">

    <input
    class="form-check-input"
    type="radio"
    name="gender"
    id="female"
    value="female">


    <label
    class="form-check-label"
    for="female">

        Female

    </label>

</div>

Radio buttons share the same name so they form one group.

15. Create a Country Select Box

Bootstrap uses the form-select class to style select controls.

<div class="mb-3">


    <label
    for="country"
    class="form-label">

        Country

    </label>


    <select
    class="form-select"
    id="country"
    required>


        <option
        value=""
        selected
        disabled>

            Select your country

        </option>


        <option value="india">
            India
        </option>


        <option value="usa">
            United States
        </option>


        <option value="uk">
            United Kingdom
        </option>


    </select>


</div>

16. Create a Date of Birth Field

Use the HTML date input for date selection.

<div class="mb-3">


    <label
    for="dob"
    class="form-label">

        Date of Birth

    </label>


    <input
    type="date"
    class="form-control"
    id="dob">


</div>

The browser provides a suitable date-selection interface depending on the device and browser.

17. Create a Terms Checkbox

Use a checkbox to require agreement to terms and conditions.

<div class="form-check mb-3">


    <input
    class="form-check-input"
    type="checkbox"
    id="terms"
    required>


    <label
    class="form-check-label"
    for="terms">

        I agree to the Terms and Conditions.

    </label>


</div>

The required attribute prevents normal browser form submission until the checkbox is selected.

18. Create the Register Button

Use a Bootstrap primary button for form submission.

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

    Create Account

</button>

The w-100 class makes the button fill the available width.

19. Add a Login Link

Existing users can be directed to the login page.

<div
class="text-center
mt-4">


    <span
    class="text-body-secondary">

        Already have an account?

    </span>


    <a
    href="#"
    class="text-decoration-none">

        Login

    </a>


</div>

20. Create a Two-Column Form Layout

Some registration fields can be placed side by side on larger screens.

<div class="row g-3">


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


        <label
        for="firstName"
        class="form-label">

            First Name

        </label>


        <input
        type="text"
        class="form-control"
        id="firstName">


    </div>


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


        <label
        for="lastName"
        class="form-label">

            Last Name

        </label>


        <input
        type="text"
        class="form-control"
        id="lastName">


    </div>


</div>

On small screens the fields stack vertically. From the medium breakpoint, they can appear in two columns.

21. Use Form Row Spacing

The g-3 class provides consistent spacing between the columns and rows.

<div class="row g-3">

    Form Fields

</div>

Using Bootstrap's gap utilities avoids the need to create custom spacing rules for every field.

22. Add an Address Field

Use a textarea for a multi-line address.

<div class="mb-3">


    <label
    for="address"
    class="form-label">

        Address

    </label>


    <textarea
    class="form-control"
    id="address"
    rows="3"
    placeholder="Enter your address">
    </textarea>


</div>

23. Add a File Upload Field

Bootstrap can style an HTML file input with form-control.

<div class="mb-3">


    <label
    for="profile"
    class="form-label">

        Profile Photo

    </label>


    <input
    type="file"
    class="form-control"
    id="profile"
    accept="image/*">


</div>

Actual file upload requires appropriate server-side handling.

24. Add Responsive Form Columns

A larger registration form can use multiple responsive columns.

<div class="row g-3">


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

        First Field

    </div>


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

        Second Field

    </div>


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

        Third Field

    </div>


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

        Fourth Field

    </div>


</div>

This pattern makes the form responsive without custom media queries.

25. Add Password Requirements

A registration page can clearly explain password requirements.

<div class="alert alert-info">

    <strong>
        Password Requirements:
    </strong>


    <ul class="mb-0">

        <li>
            At least 8 characters.
        </li>

        <li>
            Include a combination
            appropriate for your
            application's security policy.
        </li>

    </ul>

</div>

The actual password policy should be enforced by the application server as well.

26. Create the Complete Registration Form

Now combine the main registration fields into one Bootstrap form.

<form>


    <div class="mb-3">

        <label
        for="name"
        class="form-label">

            Full Name

        </label>


        <input
        type="text"
        class="form-control"
        id="name"
        required>

    </div>


    <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="phone"
        class="form-label">

            Phone Number

        </label>


        <input
        type="tel"
        class="form-control"
        id="phone"
        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">

        <label
        for="confirmPassword"
        class="form-label">

            Confirm Password

        </label>


        <input
        type="password"
        class="form-control"
        id="confirmPassword"
        required>

    </div>


    <div class="mb-3">

        <label
        for="country"
        class="form-label">

            Country

        </label>


        <select
        class="form-select"
        id="country"
        required>


            <option
            value=""
            selected
            disabled>

                Select Country

            </option>


            <option value="india">
                India
            </option>


            <option value="usa">
                United States
            </option>


            <option value="uk">
                United Kingdom
            </option>


        </select>


    </div>


    <div class="form-check mb-3">


        <input
        class="form-check-input"
        type="checkbox"
        id="terms"
        required>


        <label
        class="form-check-label"
        for="terms">

            I agree to the Terms
            and Conditions.

        </label>


    </div>


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

        Create Account

    </button>


</form>

27. Understand the Complete Page Structure

The registration page can follow this structure:

Container
    ↓
Responsive Row
    ↓
Registration Column
    ↓
Registration Card
    ↓
Card Body
    ↓
Registration Heading
    ↓
Name Fields
    ↓
Email and Phone
    ↓
Password Fields
    ↓
Gender
    ↓
Country
    ↓
Date of Birth
    ↓
Address
    ↓
Terms Checkbox
    ↓
Register Button
    ↓
Login Link

28. Add Bootstrap JavaScript

Include the Bootstrap JavaScript bundle when the surrounding page uses Bootstrap components that require JavaScript.

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

The basic registration form itself does not require Bootstrap JavaScript.

29. Complete Registration Page Code

Here is the complete responsive Bootstrap registration page.

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">


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


    <title>
        Bootstrap Registration Page
    </title>


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

</head>


<body>


<div class="container py-5">


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


        <div
        class="col-12
        col-sm-10
        col-md-8
        col-lg-7
        col-xl-6">


            <div
            class="card
            shadow-sm">


                <div
                class="card-body
                p-4">


                    <div
                    class="text-center
                    mb-4">


                        <h1>

                            Create Account

                        </h1>


                        <p
                        class="text-body-secondary">

                            Register a new account

                        </p>


                    </div>


                    <form>


                        <div class="row g-3">


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


                                <label
                                for="firstName"
                                class="form-label">

                                    First Name

                                </label>


                                <input
                                type="text"
                                class="form-control"
                                id="firstName"
                                placeholder="First name"
                                required>


                            </div>


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


                                <label
                                for="lastName"
                                class="form-label">

                                    Last Name

                                </label>


                                <input
                                type="text"
                                class="form-control"
                                id="lastName"
                                placeholder="Last name"
                                required>


                            </div>


                            <div class="col-12">


                                <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="col-12
                            col-md-6">


                                <label
                                for="phone"
                                class="form-label">

                                    Phone Number

                                </label>


                                <input
                                type="tel"
                                class="form-control"
                                id="phone"
                                placeholder="Phone number"
                                required>


                            </div>


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


                                <label
                                for="dob"
                                class="form-label">

                                    Date of Birth

                                </label>


                                <input
                                type="date"
                                class="form-control"
                                id="dob">


                            </div>


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


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

                                    Password

                                </label>


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


                            </div>


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


                                <label
                                for="confirmPassword"
                                class="form-label">

                                    Confirm Password

                                </label>


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


                            </div>


                            <div class="col-12">


                                <label
                                for="country"
                                class="form-label">

                                    Country

                                </label>


                                <select
                                class="form-select"
                                id="country"
                                required>


                                    <option
                                    value=""
                                    selected
                                    disabled>

                                        Select your country

                                    </option>


                                    <option value="india">

                                        India

                                    </option>


                                    <option value="usa">

                                        United States

                                    </option>


                                    <option value="uk">

                                        United Kingdom

                                    </option>


                                    <option value="canada">

                                        Canada

                                    </option>


                                </select>


                            </div>


                            <div class="col-12">


                                <label
                                class="form-label">

                                    Gender

                                </label>


                                <div
                                class="d-flex
                                flex-wrap
                                gap-3">


                                    <div
                                    class="form-check">


                                        <input
                                        class="form-check-input"
                                        type="radio"
                                        name="gender"
                                        id="male"
                                        value="male">


                                        <label
                                        class="form-check-label"
                                        for="male">

                                            Male

                                        </label>


                                    </div>


                                    <div
                                    class="form-check">


                                        <input
                                        class="form-check-input"
                                        type="radio"
                                        name="gender"
                                        id="female"
                                        value="female">


                                        <label
                                        class="form-check-label"
                                        for="female">

                                            Female

                                        </label>


                                    </div>


                                    <div
                                    class="form-check">


                                        <input
                                        class="form-check-input"
                                        type="radio"
                                        name="gender"
                                        id="other"
                                        value="other">


                                        <label
                                        class="form-check-label"
                                        for="other">

                                            Other

                                        </label>


                                    </div>


                                </div>


                            </div>


                            <div class="col-12">


                                <label
                                for="address"
                                class="form-label">

                                    Address

                                </label>


                                <textarea
                                class="form-control"
                                id="address"
                                rows="3"
                                placeholder="Enter your address">
                                </textarea>


                            </div>


                            <div class="col-12">


                                <div
                                class="form-check">


                                    <input
                                    class="form-check-input"
                                    type="checkbox"
                                    id="terms"
                                    required>


                                    <label
                                    class="form-check-label"
                                    for="terms">

                                        I agree to the
                                        Terms and Conditions.

                                    </label>


                                </div>


                            </div>


                            <div class="col-12">


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

                                    Create Account

                                </button>


                            </div>


                        </div>


                    </form>


                    <div
                    class="text-center
                    mt-4">


                        <span
                        class="text-body-secondary">

                            Already have an account?

                        </span>


                        <a
                        href="#"
                        class="text-decoration-none">

                            Login

                        </a>


                    </div>


                </div>


            </div>


        </div>


    </div>


</div>


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


</body>

</html>

30. Final Project Result

After completing this project, you will have a complete responsive Bootstrap registration page.

  • Responsive Bootstrap container.
  • Responsive grid layout.
  • Registration card.
  • First and last name fields.
  • Email field.
  • Phone field.
  • Date of birth field.
  • Password field.
  • Confirm password field.
  • Country select box.
  • Gender radio buttons.
  • Address textarea.
  • Terms and conditions checkbox.
  • Register button.
  • Login link.
  • Bootstrap spacing utilities.
  • Responsive form columns.
Project Complete! You have created a responsive Bootstrap registration page using Bootstrap forms, cards, grid classes, buttons, radio buttons, checkboxes, select controls, spacing utilities, and responsive breakpoints.

📌 Key Points

  • Use form-label for form labels.
  • Use form-control for text, email, telephone, password, date, textarea, and file inputs.
  • Use form-select for select controls.
  • Use form-check for checkboxes and radio buttons.
  • Radio buttons in the same group should use the same name.
  • Use row g-3 to create a responsive form layout with consistent spacing.
  • Use col-12 col-md-6 when fields should stack on small screens and appear side by side from the medium breakpoint.
  • Use required for basic browser-side validation.
  • Use w-100 to create a full-width registration button.
  • Use card and card-body to organize the form.
  • Use shadow-sm to add a subtle Bootstrap shadow.
  • Use proper labels and matching for and id values for accessible form controls.
  • Client-side validation should not replace server-side validation.
  • Passwords should never be stored as plain text in a real application.
  • A real registration system should securely hash passwords before storing them.

🧠 Quick Quiz

Question: Which Bootstrap class is used to style a select dropdown?