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.
Our project will contain a student registration form.
The form will collect:
The form will also use Bootstrap's responsive grid system.
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>
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.
Use a Bootstrap container to organize the form.
<div class="container py-5">
Form Content
</div>
The py-5 class adds vertical padding.
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>
The <form> element contains all form controls.
<form>
Form Controls
</form>
Later, a real application can add an action and
method attribute.
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.
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.
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.
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.
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>
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>
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.
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>
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>
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>
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>
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>
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>
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.
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>
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.
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>
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.
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.
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>
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>
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.
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>
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>
After completing the project, you will have a responsive student registration form.
form-label for form labels.form-control for common text-based inputs.form-select for select boxes.form-check for checkboxes and radio buttons.input-group to combine inputs with additional
content.form-text for supporting information.required for browser-level required-field
validation.is-valid and is-invalid for Bootstrap
validation styling.invalid-feedback for invalid-field messages.row g-3 to organize form fields with spacing.col-12 col-md-6 for responsive half-width fields.name form a group.Question: Which Bootstrap class is commonly used to style a normal text input?