How to Create Multipage Website Using Bootstrap?
To create a multipage website using Bootstrap and HTML structure utilize Bootstrap’s navbar component to create navigation links between pages. Incorporate Font Awesome icons for visual enhancements and use Bootstrap classes for responsive design.
Output Preview:
How to Create Multipage Website Using Bootstrap?
Approach
- First, create a basic HTML structure then include the Bootstrap CDN links in your project.
- Create three HTML files index.html for home page, about.html for extra information of the website, and contact.html for displaying form.
- Make nav items to the navbar for giving multipage feature within a navbar. use the file names as the values for the “href” attribute of the anchor tags to link to the respective pages.
- To create a navbar, utilize Bootstrap classes such as “navbar”, “navbar-expand-lg”, “navbar-brand”, “collapse”, “navbar-collapse”, and “justify-content-end”. These classes help in creating a responsive navigation bar that expands on larger viewports, collapses on smaller screens, and aligns content to the right side of the navbar.
- Add a font fontawesome CND link in you <head> section add then use the icons.
Example : The example below shows how to create multipage website using bootstrap.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg
navbar-light bg-success">
<div class="container-fluid">
<a class="navbar-brand text-light"
href="#">
w3wiki
</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse
justify-content-end"
id="navbarNav" style="margin-right: 10px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light
active" aria-current="page"
href="index.html">
<i class="fas fa-home"></i>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light"
href="about.html">
<i class="fas fa-info-circle"></i>
About Us
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light"
href="contact.html">
<i class="fas fa-envelope
text-warning">
</i>
Contact Us
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Content Section -->
<div class="container mt-5">
<div class="row justify-content-center
align-items-center">
<div class="col-md-8">
<h1 class="text-center text-primary">
Welcome to Our Website!
</h1>
<p class="text-center text-success">
This is the home page of our website.
</p>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js">
</script>
</body>
</html>
<!-- about.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg
navbar-light bg-success">
<div class="container-fluid">
<a class="navbar-brand text-light"
href="#">
w3wiki
</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse
justify-content-end"
id="navbarNav"
style="margin-right: 10px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light active"
aria-current="page" href="index.html">
<i class="fas fa-home"></i>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light"
href="about.html">
<i class="fas fa-info-circle"></i>
About Us
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light"
href="contact.html">
<i class="fas fa-envelope
text-warning">
</i>
Contact Us
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Content Section -->
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<h1 class="card-title text-center
mb-4 text-primary">
This is Our AboutUs Page...
</h1>
<p class="card-text text-center
text-success fs-5">
w3wiki is a leading platform that
provides computer science resources and
coding challenges for programmers and
technology enthusiasts, along with
interview and exam preparations for
upcoming aspirants. With a strong
emphasis on enhancing coding skills
and knowledge, it has become a trusted
destination for over 12 million plus
registered users worldwide. The platform
offers a vast collection of tutorials,
practice problems, interview tutorials,
articles, and courses, covering various
domains of computer science.
</p>
<p class="card-text text-center
text-success fs-5">
Our exceptional mentors hailing from top
colleges & organizations have the ability
to guide you on a journey from the humble
beginnings of coding to the pinnacle of
expertise. Under their guidance watch your
skills flourish as we lay the foundation
and help you conquer the world of coding.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js">
</script>
</body>
</html>
<!-- contact.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg
navbar-light bg-success">
<div class="container-fluid">
<a class="navbar-brand text-light"
href="#">
w3wiki
</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse
justify-content-end"
id="navbarNav" style="margin-right: 10px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light active"
aria-current="page" href="index.html">
<i class="fas fa-home"></i>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light"
href="about.html">
<i class="fas fa-info-circle"></i>
About Us
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light"
href="contact.html">
<i class="fas fa-envelope text-warning"></i>
Contact Us
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Contact Form -->
<div class="container d-flex justify-content-center
align-items-center "
style="height: 100vh;">
<div class="card" style="width: 50%;">
<div class="card-body rounded">
<h1 class="card-title text-center
text-success">
Contact Us
</h1>
<p class="card-text text-center text-primary">
Fill out the form below to
get in touch with us.
</p>
<form>
<div class="mb-3">
<label for="name"
class="form-label text-success">
Your Name
</label>
<input type="text" class="form-control"
id="name"
placeholder="Enter your name">
</div>
<div class="mb-3">
<label for="email"
class="form-label text-success">
Email address
</label>
<input type="email" class="form-control"
id="email"
placeholder="Enter your email">
</div>
<div class="mb-3">
<label for="subject"
class="form-label text-success">
Subject
</label>
<input type="text" class="form-control"
id="subject"
placeholder="Enter the subject">
</div>
<div class="mb-3">
<label for="message"
class="form-label text-success">
Message
</label>
<textarea class="form-control"
id="message" rows="5"
placeholder="Enter your message">
</textarea>
</div>
<button type="submit" class="btn btn-primary
d-block mx-auto">
Submit
</button>
</form>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js">
</script>
</body>
</html>
Contact Us