How to Create Multipage Website Using Bootstrap? Last Updated : 30 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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?ApproachFirst, 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. HTML <!-- 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/[email protected]/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="#"> GeeksforGeeks </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/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </body> </html> 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/[email protected]/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="#"> GeeksforGeeks </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"> GeeksforGeeks 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/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </body> </html> 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/[email protected]/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="#"> GeeksforGeeks </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/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </body> </html> Output Comment More infoAdvertise with us Next Article How to Create Multipage Website Using Bootstrap? S skaftafh Follow Improve Article Tags : Web Technologies Bootstrap Similar Reads How to create a web page using Bootstrap ? Bootstrap is an open-source CSS framework for creating a responsive and customizable frontend for websites and web applications. Using Bootstrap's grid system one can easily create a web page very fast. Any webpage these days needs to have a navbar for user navigation, some content & a form for 6 min read How To Create A Multi-Page Website Using ReactJS? Multi-page website using ReactJS is the core for building complex web applications that require multiple views or pages. Previously where each page reloads entirely, ReactJS allows you to navigate between different pages without reloading the whole page thanks to libraries like React Router.In this 4 min read Create a Single Page Responsive Website Using Bootstrap Everyone wants to create the website which is compatible with all the devices like computer, laptops, tablets, and mobiles. So for making a website responsive the best way is to make a website using Bootstrap.Since it is a single-page website when you click on any menu on the website it will reach y 6 min read How to Create a Website Using HTML and CSS? Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu 5 min read How to Create Multipage Product showcase Template in Bootstrap ? In this article, we will guide you through the process of crafting a multipage product showcase using Bootstrap. From structuring your pages to optimizing for different devices, we will cover everything you need to know to create a stunning presentation for your products. Let's dive in and explore h 2 min read Like