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.
A registration page allows a new user to create an account.
Our project will contain:
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>
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.
Use a responsive Bootstrap container.
<div
class="container
py-5">
Registration Content
</div>
The py-5 utility adds vertical padding to the page.
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.
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.
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>
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>
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.
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.
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>
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.
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>
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.
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>
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.
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.
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.
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>
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.
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.
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>
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.
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.
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.
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>
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
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.
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>
After completing this project, you will have a complete responsive Bootstrap registration page.
form-label for form labels.
form-control for text, email, telephone, password,
date, textarea, and file inputs.
form-select for select controls.
form-check for checkboxes and radio buttons.
name.
row g-3 to create a responsive form layout with
consistent spacing.
col-12 col-md-6 when fields should stack on small
screens and appear side by side from the medium breakpoint.
required for basic browser-side validation.
w-100 to create a full-width registration button.
card and card-body to organize the form.
shadow-sm to add a subtle Bootstrap shadow.
for and id
values for accessible form controls.
Question: Which Bootstrap class is used to style a select dropdown?