How to create a web page using Bootstrap ?
Last Updated :
05 Aug, 2024
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 user data submission.
In this article, we will create a nice-looking web page consisting of a navbar, an article, and a form with input validation using only Bootstrap and no CSS.
Bootstrap Setup:
Step 1: Create a file with the name index.html and add the initial HTML5 boilerplate code to it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Page using Bootstrap</title>
</head>
<body></body>
</html>
Step 2: Now to add bootstrap you need to include the following script and link tag in the body element of your HTML code.
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” />
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" />
</head>
<body>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Creating a navbar: To create a basic navbar first add the navbar, navbar-expand, navbar-dark, & bg-color class to a nav element inside the HTML file.
Also, create a ul element with the class of navbar-nav and inside it add li elements with a class of nav-item and with links to different pages using anchor tags. After doing this your index.html file should look like this.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" />
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand navbar-dark bg-success">
<div class="container-fluid">
<a class="navbar-brand" href="./">
GeeksForGeeks
</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- NAVBAR LINKS -->
<li class="nav-item">
<a class="nav-link active" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
Navbar with 2 links
Adding Searchbar and dropdown menu to the navbar: To add a dropdown add the nav-item dropdown class to the anchor li tag and a data-bs-toggle=”dropdown” attribute to the anchor tag inside it along with the class of nav-link dropdown-toggle.
To add dropdown options add a new list to the li tag with the class of dropdown-menu and dropdown-items for different pages inside the dropdown. To add a search box outside the ul and inside the nav element use, a normal form tag with input and a button, and bootstrap will style it. After doing this your code should look like this.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" />
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand navbar-dark bg-success">
<div class="container-fluid">
<a class="navbar-brand" href="./">GeeksForGeeks</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- NAVBAR LINKS -->
<li class="nav-item">
<a class="nav-link active" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<!--DROPDOWN -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button"
data-bs-toggle="dropdown">
Coding Articles
</a>
<!-- DROPDOWN OPTIONS -->
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">
Page 1
</a>
</li>
<li><a class="dropdown-item" href="#">
Page 2
</a>
</li>
</ul>
</li>
</ul>
<!-- SEARCH BOX -->
<form class="d-flex">
<input class="form-control me-2"
type="search"
placeholder="Search site" />
<button class="btn btn-primary" type="submit">
Search
</button>
</form>
</div>
</nav>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
Adding Article: To add an article or any other content we can make use of the bootstrap grid system to make our web pages responsive and have a well-defined layout. The grid system has a row and each row will have columns of different sizes (max is 12) which can be specified by adding col-sm-size class to a div. The following code adds an article to our webpage.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" />
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand
navbar-dark bg-success">
<div class="container-fluid">
<a class="navbar-brand" href="./">
GeeksForGeeks</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- NAVBAR LINKS -->
<li class="nav-item">
<a class="nav-link active" href="#">
About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Contact
</a>
</li>
<!--DROPDOWN -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown">
Coding Articles
</a>
<!-- DROPDOWN OPTIONS -->
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Page 1
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Page 2
</a>
</li>
</ul>
</li>
</ul>
<!-- SEARCH BOX -->
<form class="d-flex">
<input class="form-control me-2"
type="search"
placeholder="Search site" />
<button class="btn btn-primary" type="submit">
Search
</button>
</form>
</div>
</nav>
<!-- ARTICLE -->
<div class="container mt-5">
<div class="row">
<div class="col-sm-2">Author Name</div>
<div class="col-sm-8">
<h2>Article Title</h2>
<h5>Created on 20 Jan 2022</h5>
<p>
GeeksForGeeks is a Computer Science portal
for geeks.It contains well written, well
thought articles. This platform has been designed
for every geek wishing to expand their knowledge,
share their knowledge and is ready to grab their
dream job. We have millions of articles, live as
well as online courses, thousands of tutorials and
much more just for the geek inside you.
</p>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
Adding Form with user validation: To learn more about how to use forms in bootstrap refer to this post on Bootstrap Forms. To add an input validated form to the webpage add this code to your index.html file.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" />
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand
navbar-dark bg-success">
<div class="container-fluid">
<a class="navbar-brand" href="./">
GeeksForGeeks
</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- NAVBAR LINKS -->
<li class="nav-item">
<a class="nav-link active" href="#">
About Us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Contact
</a>
</li>
<!--DROPDOWN -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown">
Coding Articles
</a>
<!-- DROPDOWN OPTIONS -->
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Page 1
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Page 2
</a>
</li>
</ul>
</li>
</ul>
<!-- SEARCH BOX -->
<form class="d-flex">
<input class="form-control me-2"
type="search"
placeholder="Search site" />
<button class="btn btn-primary" type="submit">
Search
</button>
</form>
</div>
</nav>
<!-- ARTICLE -->
<div class="container mt-5">
<div class="row">
<div class="col-sm-2">Author Name</div>
<div class="col-sm-8">
<h2>Article Title</h2>
<h5>Created on 20 Jan 2022</h5>
<!-- ARTICLE TEXT -->
<p>
GeeksForGeeks is a Computer Science portal
for geeks.It contains well written, well
thought articles. This platform has been designed
for every geek wishing to expand their knowledge,
share their knowledge and is ready to grab their
dream job. We have millions of articles, live as
well as online courses, thousands of tutorials and
much more just for the geek inside you.
</p>
</div>
</div>
<!-- FORM -->
<form class="was-validated">
<!-- Email Address Input -->
<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 id" required />
<div class="valid-feedback">
Valid Email id
</div>
<div class="invalid-feedback">
Please fill out this field.
</div>
</div>
<!-- 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"
minlength="8" required />
<div class="form-text" id="password-help-block">
Password needs to be 8 characters long.
</div>
<div class="valid-feedback">
Valid Password.
</div>
<div class="invalid-feedback">
Please fill out this field.
</div>
</div>
<!-- Checkbox -->
<div class="form-check mb-3">
<input class="form-check-input"
type="checkbox"
id="checkbox" required />
<label class="form-check-label" for="checkbox">
I agree on T & C.
</label>
<div class="valid-feedback">
You Agree to the T & C.
</div>
<div class="invalid-feedback">
Check this checkbox to continue.
</div>
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
Similar Reads
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: ApproachFirst, create a basic HTML s
5 min read
How to Create Modal using Bootstrap?
Bootstrap modal box is a UI component that displays content overlaid on the main page. Create it by defining a trigger button with data attributes and structuring the modal in HTML with a unique ID, allowing customization of content and functionality. Syntax: <div class="modal"> Contents...
4 min read
How to create a Simple Footer using Bootstrap 5 ?
Bootstrap 5 Footers can be used for displaying Contact links, Social media links, Service links, Company Logos, and other sections. The <footer> tag can be used with built-in classes for making the responsive footer layout. For accomplishing this task, there are 2 approaches, i.e., by using Bo
4 min read
Create a To Do List using Bootstrap 5
A To-Do List is a tool for organizing tasks, allowing users to list, prioritize, and manage their activities, ensuring efficiency and productivity in completing them. Here we will create a ToDo list using Bootstrap. We will create our layout or component using Bootstrap predefined utilities and comp
3 min read
How to create Jumbotron using Bootstrap 5 ?
Bootstrap Jumbotron is a responsive component whose main goal is to draw the visitor's attention or highlight a special piece of information. Inside a Jumbotron, you can make use of almost any other Bootstrap code to further increase its engagement value. Uses of Jumbotron: Image showcaseHighlightin
2 min read
How to create multi step progress bar using Bootstrap ?
In this article, we will create a multi-step progress bar using Bootstrap. In addition to Bootstrap, we will use jQuery for DOM manipulation. Progress bars are used to visualize the quantity of work that's been completed. The strength of the progress bar indicates the progress of the work. It is gen
4 min read
How to apply Padding using Bootstrap ?
Bootstrap provides a wide range of utility classes for adding padding to all sides of an element. These classes allow us to easily add padding to elements without the need to write custom CSS. By applying these padding classes directly to HTML elements, one can quickly adjust spacing and improve the
2 min read
How to create Call to Action Template using Bootstrap 5 ?
In this article, we will create a Call to Action (CTA) Template using Bootstrap 5. The main purpose of a Bootstrap Call to Action(CTA) template is to encourage the user to perform a specific action when the user visits the webpage. A simple CTA may consist of the image, content, button, etc, that wi
2 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
6 min read
Create a Portfolio Gallery using Bootstrap
The portfolio gallery is useful when your website contains different types of content or so much content. With the help of a portfolio gallery, you can easily display all the content on your front page to the user. We are going to build a Portfolio Gallery using Bootstrap. PrerequisitesHTMLCSSBootst
3 min read