html

How to create first web page using Bootstrap 5?

Bootstrap 5 is the most recent version of the Bootstrap framework that allows its users to create responsive websites built with mobile-first technique. Bootstrap 5 was launched in the year 2021 and has many distinguishing characteristics such as it has speedy stylesheets and enhanced responsiveness. In this tutorial, we are going to demonstrate how you can create a simple web page using Bootstrap 5.

Let’s begin.

How to create your first web page using Bootstrap 5

1. Include Bootstrap 5

The first step is to obviously add Bootstrap 5 in your HTML file. For the purpose of including Bootstrap 5 get a CDN for CSS, and JavaScript and add it in your file like we have shown below.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My First Bootstrap 5 Website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
</body>
</html>

Apart from the CDN we have also added a utf-8 character set along with a responsive meta tag. In this tag, the width is set to device-width which means that the web page width will change in correspondence to the width of the device, whereas, initial-scale is set to 1 which means when the web page is loaded by the browser for the first time the zoom level will be 1.

2. Make a navigation bar

After including Bootstrap 5 in our file, we will now make a top navigation bar using various Bootstrap 5 classes.

<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
    <div class="container">
      <div class="text-white text-center">
        <h1>Welcome</h1>
      </div>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </nav>

Below we are going to explain the various classes used to create a navigation bar.

  1. The .navbar is used to wrap a navigation bar along with .navbar-expand-sm for responsive collapsing, meanwhile the .bg-secondary and .navbar-dark are the different color schemes provided to the navigation bar.
  2. The .container class wraps all the elements of a navigation bar with a fixed-width.
  3. The .text-white and .text-center classes correspond to the color and alignment of the main heading of the website.
  4. The .navbar-nav is used to create a navigation bar that has a maximum height and is lightweight and also supports dropdowns. Meanwhile, .ml-auto sets the left margin of the list items to auto.
  5. The .nav-item, and .nav-link are used to create various list items in the navigation bar.
  6. The .active class makes a link active.

Output

A navigation bar was successfully created.

3. Adding content

Now that we have successfully created a navigation bar, we will add some content on the website. In the code below, we are just adding some text to the “About Us” section.

 <section id="aboutus">
    <div class="container">
      <div class="row align-items-left">
        <div class="col text-col">
          <h1>About Us</h1>
          <p>Hi. Welcome to my first web page. This is a responsive web page that I created using Bootstrap 5. Bootstrap is the most recent version of the Bootstrap framework that allows its users to create responsive websites with a mobile-first technique. This approach states that the web design is first developed for mobile phones, and later on for other devices.</p>
          <p>Bootstrap 5 was launched in the year 2021 and has many amazing features such as it has speedy stylesheets and enhanced responsiveness.</p>
        </div>
      </div>
    </div>
  </section>

Various classes used to add content on the web page are explained here.

  1. The .row class creates a row in which we are going to place our text, meanwhile, .align-items-left class aligns the content to the left.
  2. The .col class generates a column, whereas, the .text-col class provides a default color to the text.

Note: For the purpose of adding content we basically built a grid system above. A grid system in Bootstrap 5 makes use of various containers, rows, and columns to adjust and align content.

Output

Some content has been added to the web page.

4. Adding image gallery

To make our website further interesting we are now adding some images by building another grid system.

 <div class="container">
    <div class="row">
        <div class="col-md-4 mt-3 col-lg-3">
            <img src="image1.jpg" class="img-fluid" alt="image">
        </div>
        <div class="col-md-4 mt-3 col-lg-3">
            <img src="image2.jpg" class="img-fluid" alt="image">
        </div>
        <div class="col-md-4 mt-3 col-lg-3">
            <img src="image3.jpg" class="img-fluid" alt="image">
        </div>
        <div class="col-md-4 mt-3 col-lg-3">
          <img src="image4.jpg" class="img-fluid" alt="image">
      </div>
    </div>
    </div>

Here we have explained the classes used above.

  1. The .col-md-4 class creates four columns of equal width and specifies that the device width is medium or larger than 768px, meanwhile, the container width is 720px.
  2. The .mt-3 class provides a margin top to the grid layout.
  3. The .col-lg-3 class creates 3 columns of equal width and states that the device width is large having screen size greater or equal to 992px.
  4. Lastly the images are made responsive the .img-fluid class.

Output

A responsive image gallery was added with success.

5. Adding a button

Lastly, we are going to add a button on our website.

<iv class="container">
  <div class="mt-2">
    <button type="button" class="btn btn-secondary btn-large">Contact Us</button>
  </div>
</div>

Classes used to create the button are discussed below.

  1. The .mt-2 sets the margin top of the button.
  2. For the purpose of customizing our button we are using the .btn class,meanwhile, the .btn-secondary class specifies the color of the button, and the .btn-large class states the size of the button.

Output
This is how the complete web page looks like.

A simple web page was successfully created using Bootstrap 5.

Note: To evaluate the responsiveness of the web page scale the web browser up and down.

Conclusion

For the purpose of creating your first web page using Bootstrap 5 you need to have a basic understanding of various Bootstrap 5 built-in classes. A basic necessity of this framework is a container that wraps elements inside it. The container classes can be used with other classes to build various entities that a web page has such as a navigation bar, image grid, buttons, etc. In this write-up, we have demonstrated with the help of an appropriate example how you can create your first web page using Bootstrap 5.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.