In this practical project, we will create a responsive and professional login page using Bootstrap. You will learn how to combine Bootstrap containers, rows, columns, cards, forms, form controls, buttons, spacing utilities, alignment utilities, and responsive classes.
A login page is commonly used to allow registered users to access their accounts.
Our project will contain:
Start with the standard HTML document structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Login Page
</title>
</head>
<body>
Login Content
</body>
</html>
Add Bootstrap CSS inside the <head> section.
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">This gives us access to Bootstrap's layout, form, card, button, spacing, and responsive utilities.
Use a Bootstrap container to organize the login page.
<div class="container">
Login Content
</div>
The container class provides responsive horizontal
spacing and a suitable maximum width.
We can use Bootstrap Flexbox utilities to center the login card.
<div
class="container
min-vh-100
d-flex
align-items-center
justify-content-center">
Login Card
</div>Here:
min-vh-100 gives the container at least the viewport
height.d-flex enables Flexbox.align-items-center centers content vertically.justify-content-center centers content horizontally.Use a Bootstrap card as the main login container.
<div class="card shadow-sm">
<div class="card-body">
Login Form
</div>
</div>
The shadow-sm utility adds a small Bootstrap shadow around
the card.
Bootstrap width utilities can be used to control the card width.
<div
class="card
shadow-sm
w-100"
style="max-width:420px;">
Login Form
</div>The card remains responsive while the maximum width keeps the form easy to read on larger screens.
Add a heading inside the card body.
<div class="text-center mb-4">
<h1>
Login
</h1>
<p class="text-body-secondary">
Sign in to your account
</p>
</div>
The text-center class centers the heading and description.
Use Bootstrap's form-label and form-control
classes.
<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">
</div>
The type="email" also provides browser-level email input
validation.
Use type="password" for password input.
<div class="mb-3">
<label
for="password"
class="form-label">
Password
</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>Password input hides the entered characters in the browser.
Bootstrap provides the form-check class for checkboxes.
<div class="form-check mb-3">
<input
class="form-check-input"
type="checkbox"
id="remember">
<label
class="form-check-label"
for="remember">
Remember me
</label>
</div>The checkbox can allow users to request a longer login session when the application supports that functionality.
Add a link for users who cannot remember their password.
<div class="text-end mb-3">
<a
href="#"
class="text-decoration-none">
Forgot Password?
</a>
</div>
The text-decoration-none utility removes the default
underline from the link.
Use a Bootstrap primary button.
<button
type="submit"
class="btn btn-primary w-100">
Login
</button>
The w-100 class makes the button occupy the full available
width.
Users who do not have an account can be directed to a registration page.
<div
class="text-center
mt-4">
<span
class="text-body-secondary">
Don't have an account?
</span>
<a
href="#"
class="text-decoration-none">
Register
</a>
</div>Now combine the email, password, checkbox, and button inside a form.
<form>
<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="password"
class="form-label">
Password
</label>
<input
type="password"
class="form-control"
id="password"
required>
</div>
<button
type="submit"
class="btn btn-primary w-100">
Login
</button>
</form>
HTML attributes such as required can provide basic browser
validation.
<input
type="email"
class="form-control"
required>
<input
type="password"
class="form-control"
required>However, real applications must also validate submitted data on the server.
Placeholder text can give users a hint about what to enter.
<input
type="email"
class="form-control"
placeholder="Enter your email">
<input
type="password"
class="form-control"
placeholder="Enter your password">Placeholders should not replace proper form labels.
Bootstrap's form-text class can provide additional
information.
<div class="mb-3">
<label
for="password"
class="form-label">
Password
</label>
<input
type="password"
class="form-control"
id="password">
<div class="form-text">
Your password must be kept private.
</div>
</div>Input groups can add a prefix or suffix to an input.
<div class="input-group mb-3">
<span class="input-group-text">
@
</span>
<input
type="text"
class="form-control"
placeholder="Username">
</div>Input groups are useful when an input needs additional visual context.
A login page can also be designed with an information section and a login form.
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6">
Welcome Information
</div>
<div class="col-12 col-lg-6">
Login Form
</div>
</div>On smaller screens, the two columns stack vertically.
The left section can provide information about the application.
<div class="p-4">
<h1>
Welcome Back!
</h1>
<p class="lead">
Sign in to continue
using your account.
</p>
<p class="text-body-secondary">
Access your dashboard,
courses, reports, and
account information.
</p>
</div>Bootstrap spacing utilities can make the login page easier to read.
p-4 adds padding on all sides.mb-3 adds bottom margin.mt-4 adds top margin.py-4 adds vertical padding.gap-3 adds spacing between flex or grid items.<div
class="card
p-4">
Login Form
</div>The login form should work properly on small screens.
<div
class="container
py-4">
<div
class="row
justify-content-center">
<div
class="col-12
col-sm-10
col-md-8
col-lg-6
col-xl-4">
Login Card
</div>
</div>
</div>The column becomes narrower on larger screens while remaining nearly full-width on smaller screens.
Flexbox can place the checkbox and password link on the same row.
<div
class="d-flex
justify-content-between
align-items-center
mb-3">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="remember">
<label
class="form-check-label"
for="remember">
Remember me
</label>
</div>
<a
href="#"
class="text-decoration-none">
Forgot Password?
</a>
</div>A login page may provide another authentication option.
<div class="text-center mt-4">
<p class="text-body-secondary">
Or continue with
</p>
<button
type="button"
class="btn btn-outline-secondary">
Continue with Google
</button>
</div>The actual authentication process must be implemented separately by the application.
Now combine the main form elements.
<div
class="card
shadow-sm">
<div class="card-body p-4">
<div class="text-center mb-4">
<h1>
Login
</h1>
<p
class="text-body-secondary">
Sign in to your account
</p>
</div>
<form>
<div class="mb-3">
<label
class="form-label"
for="email">
Email Address
</label>
<input
type="email"
class="form-control"
id="email"
placeholder="Enter your email"
required>
</div>
<div class="mb-3">
<label
class="form-label"
for="password">
Password
</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password"
required>
</div>
<div
class="d-flex
justify-content-between
align-items-center
mb-3">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="remember">
<label
class="form-check-label"
for="remember">
Remember me
</label>
</div>
<a
href="#"
class="text-decoration-none">
Forgot Password?
</a>
</div>
<button
type="submit"
class="btn btn-primary w-100">
Login
</button>
</form>
<div class="text-center mt-4">
<span
class="text-body-secondary">
Don't have an account?
</span>
<a
href="#"
class="text-decoration-none">
Register
</a>
</div>
</div>
</div>The complete responsive login page can follow this structure:
Container
↓
Responsive Row
↓
Login Column
↓
Login Card
↓
Card Body
↓
Login Heading
↓
Email Field
↓
Password Field
↓
Remember Me + Forgot Password
↓
Login Button
↓
Register LinkThis structure is simple, responsive, and easy to connect to a backend login system.
If your page uses Bootstrap JavaScript components, include the Bootstrap bundle before the closing body tag.
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>A basic login form itself does not require Bootstrap JavaScript, but the bundle is useful if the surrounding page contains Bootstrap components that need JavaScript.
Here is the complete responsive Bootstrap login page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Bootstrap Login 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
min-vh-100
d-flex
align-items-center
justify-content-center
py-4">
<div
class="row
justify-content-center
w-100">
<div
class="col-12
col-sm-10
col-md-8
col-lg-6
col-xl-4">
<div
class="card
shadow-sm">
<div
class="card-body
p-4">
<div
class="text-center
mb-4">
<h1>
Login
</h1>
<p
class="text-body-secondary">
Sign in to your account
</p>
</div>
<form>
<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="d-flex
justify-content-between
align-items-center
mb-3">
<div
class="form-check">
<input
class="form-check-input"
type="checkbox"
id="remember">
<label
class="form-check-label"
for="remember">
Remember me
</label>
</div>
<a
href="#"
class="text-decoration-none">
Forgot Password?
</a>
</div>
<button
type="submit"
class="btn
btn-primary
w-100">
Login
</button>
</form>
<div
class="text-center
mt-4">
<span
class="text-body-secondary">
Don't have an account?
</span>
<a
href="#"
class="text-decoration-none">
Register
</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 responsive Bootstrap login page containing the important components of a modern login form.
container to create a responsive page container.
row and responsive column classes to organize the
layout.
card and card-body to create the login
panel.
form-label for form labels.
form-control for text, email, and password inputs.
form-check for checkbox controls.
btn btn-primary to create the main login button.
w-100 to make the login button full width.
text-center to center text.
d-flex and alignment utilities to arrange form
elements.
min-vh-100 with Flexbox to center content vertically
within the viewport.
required for basic browser-side validation.
Question: Which Bootstrap class is used to style a standard text input or password input?