Lesson 51 of 60 – Bootstrap Form Practical Project
85%

Bootstrap Form Practical Project

In this practical project, we will create a complete responsive student registration form using Bootstrap. You will learn how to combine Bootstrap form controls, grid columns, input groups, checkboxes, radio buttons, select boxes, buttons, validation classes, and responsive layouts.

Project Goal: Create a professional and responsive student registration form using Bootstrap without writing custom CSS.

1. Project Overview

Our project will contain a student registration form.

The form will collect:

  • Student name.
  • Email address.
  • Mobile number.
  • Date of birth.
  • Gender.
  • Course selection.
  • Address.
  • Skills.
  • Password.
  • Terms and conditions.

The form will also use Bootstrap's responsive grid system.

2. Create the HTML Document

Start with a basic HTML document.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>
        Student Registration
    </title>

</head>

<body>

    Registration Form

</body>

</html>

3. Add Bootstrap CSS

Add Bootstrap CSS inside the <head>.

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

Now Bootstrap form classes can be used.

4. Create the Container

Use a Bootstrap container to organize the form.

<div class="container py-5">

    Form Content

</div>

The py-5 class adds vertical padding.

5. Add the Form Heading

Create a centered heading for the registration form.

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

    <h1>
        Student Registration
    </h1>

    <p>
        Register for your course
    </p>

</div>

6. Create the Form Element

The <form> element contains all form controls.

<form>

    Form Controls

</form>

Later, a real application can add an action and method attribute.

7. Create the First Row

Use a Bootstrap row to create the form layout.

<div class="row g-3">

    Form Columns

</div>

The g-3 class provides spacing between the grid items.

8. Add the First Name Field

Create a responsive first-name field.

<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="Enter first name">

</div>

The field is full width on small screens and half width from the medium breakpoint.

9. Add the Last Name Field

Create a second column for the last name.

<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="Enter last name">

</div>

Together, the first and last name fields occupy the complete 12-column grid on medium and larger screens.

10. Add the Email Field

Use the HTML email input type with Bootstrap styling.

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

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

        Email Address

    </label>


    <input
    type="email"
    class="form-control"
    id="email"
    placeholder="name@example.com">

</div>

The browser can provide basic email-format validation when the form is submitted.

11. Add the Mobile Number

Create a mobile number field.

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

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

        Mobile Number

    </label>


    <input
    type="tel"
    class="form-control"
    id="mobile"
    placeholder="Enter mobile number">

</div>

12. Add Date of Birth

Use the HTML date input type.

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

13. Create Gender Radio Buttons

Radio buttons are suitable when the user should select one option from a group.

<div class="col-12">

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

</div>

The same name groups the radio buttons together.

14. Create a Course Select Box

Use form-select for a dropdown list.

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

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

        Select Course

    </label>


    <select
    class="form-select"
    id="course">


        <option selected>
            Choose a course
        </option>


        <option>
            HTML
        </option>


        <option>
            CSS
        </option>


        <option>
            JavaScript
        </option>


        <option>
            Python
        </option>


    </select>

</div>

15. Add Experience Level

Create another select field for the student's level.

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

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

        Experience Level

    </label>


    <select
    class="form-select"
    id="level">

        <option selected>
            Select Level
        </option>

        <option>
            Beginner
        </option>

        <option>
            Intermediate
        </option>

        <option>
            Advanced
        </option>

    </select>

</div>

16. Create an Input Group

Input groups allow you to place text or controls alongside an input.

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

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

        Website

    </label>


    <div class="input-group">

        <span class="input-group-text">
            https://
        </span>


        <input
        type="text"
        class="form-control"
        id="website"
        placeholder="example.com">

    </div>

</div>

17. Add a Textarea

Use a textarea for longer text such as an address.

<div class="col-12">

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

        Address

    </label>


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

</div>

18. Add Skills Checkboxes

Checkboxes are useful when the user can select multiple options.

<div class="col-12">

    <label class="form-label">

        Skills

    </label>


    <div class="form-check">

        <input
        class="form-check-input"
        type="checkbox"
        id="html"
        value="html">

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

            HTML

        </label>

    </div>


    <div class="form-check">

        <input
        class="form-check-input"
        type="checkbox"
        id="css"
        value="css">

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

            CSS

        </label>

    </div>


    <div class="form-check">

        <input
        class="form-check-input"
        type="checkbox"
        id="javascript"
        value="javascript">

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

            JavaScript

        </label>

    </div>

</div>

19. Create a Password Field

Use the password input type for passwords.

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

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

        Password

    </label>


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

</div>

20. Add Confirm Password

Add a second password field for confirmation.

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

</div>

In a real application, the server should verify that both passwords match.

21. Add Form Help Text

The form-text class can provide additional information about a field.

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

22. Add Required Fields

HTML's required attribute can prevent a form from being submitted when a required field is empty.

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

Client-side validation improves the user experience, but server-side validation is still required in a real application.

23. Add Terms Checkbox

Create a checkbox that users must select before submitting.

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

24. Add Form Buttons

Add Submit and Reset buttons.

<div class="col-12">


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

        Register

    </button>


    <button
    type="reset"
    class="btn btn-secondary">

        Reset

    </button>


</div>

The submit button submits the form and the reset button resets the form controls.

25. Create a Responsive Form Layout

Use Bootstrap's responsive grid for a professional form layout.

<div class="row g-3">


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

        First Name

    </div>


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

        Last Name

    </div>


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

        Email

    </div>


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

        Mobile

    </div>


    <div class="col-12">

        Address

    </div>


</div>

On small screens, the fields stack vertically. On medium and larger screens, the half-width fields appear side by side.

26. Add Responsive Buttons

You can make buttons full width on small screens and automatic width on larger screens.

<button
class="btn
btn-primary
w-100
w-md-auto">

    Register

</button>
Important: Bootstrap's standard sizing utilities do not provide every possible responsive width combination such as w-md-auto by default. For a responsive button without custom CSS, use Bootstrap's grid or Flexbox utilities instead.
<div
class="d-grid
d-md-flex
gap-2">


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

        Register

    </button>


    <button
    type="reset"
    class="btn btn-secondary">

        Reset

    </button>


</div>

27. Add Validation Styling

Bootstrap provides validation classes such as is-valid and is-invalid.

<input
type="email"
class="form-control is-valid"
value="student@example.com">

For an invalid field:

<input
type="email"
class="form-control is-invalid"
value="wrong-email">


<div class="invalid-feedback">

    Please enter a valid email address.

</div>

These classes provide visual feedback. A real application should also validate submitted data on the server.

28. Complete Form Structure

The complete form structure combines the Bootstrap container, row, columns, and form controls.

<div class="container py-5">


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

        <h1>
            Student Registration
        </h1>

        <p>
            Register for your course
        </p>

    </div>


    <form>


        <div class="row g-3">


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

                First Name

            </div>


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

                Last Name

            </div>


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

                Email

            </div>


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

                Mobile

            </div>


            <div class="col-12">

                Address

            </div>


            <div class="col-12">

                Terms

            </div>


            <div class="col-12">

                Buttons

            </div>


        </div>


    </form>


</div>

29. Complete Project Code

Here is the complete responsive student registration form.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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


    <title>
        Student Registration
    </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="text-center mb-5">

        <h1>
            Student Registration
        </h1>

        <p>
            Register for your course
        </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="Enter 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="Enter last name"
                required>

            </div>


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

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

                    Email Address

                </label>


                <input
                type="email"
                class="form-control"
                id="email"
                placeholder="name@example.com"
                required>

            </div>


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

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

                    Mobile Number

                </label>


                <input
                type="tel"
                class="form-control"
                id="mobile"
                placeholder="Enter mobile 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="course"
                class="form-label">

                    Select Course

                </label>


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


                    <option
                    selected
                    disabled
                    value="">

                        Choose a course

                    </option>


                    <option>
                        HTML
                    </option>


                    <option>
                        CSS
                    </option>


                    <option>
                        JavaScript
                    </option>


                    <option>
                        Python
                    </option>


                    <option>
                        Bootstrap
                    </option>


                </select>

            </div>


            <div class="col-12">

                <label class="form-label">

                    Gender

                </label>


                <div class="form-check form-check-inline">

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


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

                        Male

                    </label>

                </div>


                <div class="form-check form-check-inline">

                    <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 form-check-inline">

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

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

                    Address

                </label>


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

            </div>


            <div class="col-12">

                <label class="form-label">

                    Skills

                </label>


                <div class="form-check">

                    <input
                    class="form-check-input"
                    type="checkbox"
                    id="html"
                    value="html">


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

                        HTML

                    </label>

                </div>


                <div class="form-check">

                    <input
                    class="form-check-input"
                    type="checkbox"
                    id="css"
                    value="css">


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

                        CSS

                    </label>

                </div>


                <div class="form-check">

                    <input
                    class="form-check-input"
                    type="checkbox"
                    id="javascript"
                    value="javascript">


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

                        JavaScript

                    </label>

                </div>

            </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="Enter password"
                required>


                <div class="form-text">

                    Use at least 8 characters.

                </div>

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

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


                <div
                class="d-grid
                d-md-flex
                gap-2">


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

                        Register

                    </button>


                    <button
                    type="reset"
                    class="btn btn-secondary">

                        Reset

                    </button>


                </div>


            </div>


        </div>


    </form>


</div>


</body>

</html>

30. Final Project Result

After completing the project, you will have a responsive student registration form.

  • Responsive Bootstrap grid layout.
  • Text, email, telephone, date, and password inputs.
  • Responsive two-column form fields.
  • Radio buttons for gender selection.
  • Checkboxes for multiple skills.
  • Select dropdown for course selection.
  • Textarea for address.
  • Input groups.
  • Required form fields.
  • Terms and conditions checkbox.
  • Submit and reset buttons.
  • Bootstrap validation classes.
  • Responsive button layout.
Project Complete! You have created a complete responsive Bootstrap form using the Bootstrap Grid System and Bootstrap Form components.

📌 Key Points

  • Use form-label for form labels.
  • Use form-control for common text-based inputs.
  • Use form-select for select boxes.
  • Use form-check for checkboxes and radio buttons.
  • Use input-group to combine inputs with additional content.
  • Use form-text for supporting information.
  • Use required for browser-level required-field validation.
  • Use is-valid and is-invalid for Bootstrap validation styling.
  • Use invalid-feedback for invalid-field messages.
  • Use row g-3 to organize form fields with spacing.
  • Use col-12 col-md-6 for responsive half-width fields.
  • Radio buttons with the same name form a group.
  • Checkboxes can be used for multiple independent selections.
  • Always perform server-side validation when processing form data.
  • Never rely only on client-side validation for security.

🧠 Quick Quiz

Question: Which Bootstrap class is commonly used to style a normal text input?