How to create a web page using Bootstrap ?

Last Updated : 31 Jan, 2022

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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js”></script>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” />

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    /> 
  </head> 
  <body> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/bootstrap@5.1.3/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/bootstrap@5.1.3/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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    ></script> 
  </body> 
</html>

Output:

Navbar with dropdown and a search box

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/bootstrap@5.1.3/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/bootstrap@5.1.3/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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"> 
    </script> 
  </body> 
</html>

Output:

Final webpage with a form using bootstrap

Suggest improvement

What is the Bootstrap page header ?

How to navigate on path by button click in react router ?

Share your thoughts in the comments

How to create a web page using Bootstrap ?

HTML

HTML

HTML

HTML

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?