How to Build a Responsive Website with Bootstrap 5

March 1, 2025

Introduction

Welcome! In this tutorial, you’ll learn how to create a fully responsive, multi-purpose website template using Bootstrap 5. This template includes a navigation bar, carousel, columns, cards (for displaying content like videos or blog posts), a newsletter signup section, and a footer with a drop-up menu. By following along, you’ll discover how easy it is to build professional-looking websites quickly using Bootstrap.

What Is Bootstrap?

Bootstrap is the world’s most popular front-end CSS framework originally developed by Twitter. It provides ready-to-use components such as navigation bars, grids, carousels, forms, and more. This helps you build mobile-first, responsive websites efficiently. Major companies like Twitter, Udemy, Spotify, LinkedIn, and Lyft rely on Bootstrap in their front-end development.

Project Setup
Linking Bootstrap via CDN
Creating the Navigation Bar
Adding a Carousel
Building the About Section
Creating the Videos Section (Cards)
Setting Up the Newsletter Section
Creating the Footer
Conclusion

1. Project Setup

If you would like to see the finished project excercise files, you can do so by following this github repository link: https://github.com/codingmoney/free-bootstrap-5-template

Create a new folder on your desktop (e.g., bootstrap5-tutorial).
Copy any images you plan to use into this folder.
Open the folder in your code editor (e.g., Visual Studio Code).
Create an index.html file inside this folder.

Your folder structure might look like this:

bootstrap5-tutorial/
├── img/
│   ├── logo.png
│   ├── carousel1.jpg
│   ├── carousel2.jpg
│   └── carousel3.jpg
└── index.html

2. Linking Bootstrap via CDN

Bootstrap offers a quick way to link its files via a Content Delivery Network (CDN). Insert the following code in the <head> section of your index.html, and place the Bootstrap JavaScript references before the closing </body> tag.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap 5 Responsive Template</title>
  <!-- Bootstrap CSS via CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet"
  />
</head>
<body>
  <!-- Your content goes here -->
  <!-- Bootstrap JS and dependencies via CDN -->
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
  </script>
</body>
</html>

Note: Check the official Bootstrap website for the most recent version links.

3. Creating the Navigation Bar

Bootstrap provides a variety of Navbar examples. We’ll use a simple one with a drop-down menu and a logo image.

Inside the <body> tag, create a <nav> element.
Place the .navbar, .navbar-expand-lg, and .navbar-light (or .navbar-dark) classes as desired.
Use a .container to keep the navbar content centered.
Use the margin-left auto (ms-auto in Bootstrap 5 for RTL support) on the <ul> to push menu items to the right.

Example Navbar code:

<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <!-- Logo -->
    <a class="navbar-brand" href="#">
      <img src="images/logo.png" alt="Logo" height="40" />
    </a>
    
    <!-- Toggler for smaller screens -->
    <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>
    <!-- Menu Items -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        
        <!-- Drop-down Menu Example -->
        <li class="nav-item dropdown">
          <a 
            class="nav-link dropdown-toggle" 
            href="#" 
            id="navbarDropdown" 
            role="button" 
            data-bs-toggle="dropdown" 
            aria-expanded="false"
          >
            Services
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Web Development</a></li>
            <li><a class="dropdown-item" href="#">App Development</a></li>
          </ul>
        </li>
        
        <li class="nav-item dropdown">
          <a 
            class="nav-link dropdown-toggle" 
            href="#" 
            id="navbarDropdown2" 
            role="button" 
            data-bs-toggle="dropdown" 
            aria-expanded="false"
          >
            Products
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
            <li><a class="dropdown-item" href="#">E-books</a></li>
            <li><a class="dropdown-item" href="#">Courses</a></li>
          </ul>
        </li>
        
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

4. Adding a Carousel

Next, create a Carousel to showcase images or announcements.

Place the carousel below the navbar.
Use the .carousel classes and .carousel-inner for each slide.

Example Carousel code:

<!-- Carousel Section -->
<div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button 
      type="button" 
      data-bs-target="#mainCarousel" 
      data-bs-slide-to="0" 
      class="active" 
      aria-current="true" 
      aria-label="Slide 1">
    </button>
    <button 
      type="button" 
      data-bs-target="#mainCarousel" 
      data-bs-slide-to="1" 
      aria-label="Slide 2">
    </button>
    <button 
      type="button" 
      data-bs-target="#mainCarousel" 
      data-bs-slide-to="2" 
      aria-label="Slide 3">
    </button>
  </div>
  <div class="carousel-inner">
    <!-- Slide 1 -->
    <div class="carousel-item active">
      <img src="images/carousel1.jpg" class="d-block w-100" alt="First slide" />
      <div class="carousel-caption d-none d-md-block">
        <h5>First Slide Title</h5>
        <p>First slide description goes here.</p>
      </div>
    </div>
    
    <!-- Slide 2 -->
    <div class="carousel-item">
      <img src="images/carousel2.jpg" class="d-block w-100" alt="Second slide" />
      <div class="carousel-caption d-none d-md-block">
        <h5>Second Slide Title</h5>
        <p>Second slide description goes here.</p>
      </div>
    </div>
    
    <!-- Slide 3 -->
    <div class="carousel-item">
      <img src="images/carousel3.jpg" class="d-block w-100" alt="Third slide" />
      <div class="carousel-caption d-none d-md-block">
        <h5>Third Slide Title</h5>
        <p>Third slide description goes here.</p>
      </div>
    </div>
  </div>
  <!-- Carousel Controls -->
  <button 
    class="carousel-control-prev" 
    type="button" 
    data-bs-target="#mainCarousel" 
    data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button 
    class="carousel-control-next" 
    type="button" 
    data-bs-target="#mainCarousel" 
    data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

5. Building the About Section

Use Bootstrap’s grid system to create an about section with three columns.

Wrap everything in a .container to keep the layout centered.
Create a .row and then three .col-lg-4 columns.
Add text and an image in the first column, pure text in the second, and any content (like a list) in the third.

Example About Section code:

<!-- About Section -->
<div class="container pt-4">
  <div class="row">
    <!-- Column 1 -->
    <div class="col-lg-4 mb-4">
      <h2 class="mb-4">About Me</h2>
      <img 
        src="images/profile.jpg" 
        class="img-fluid rounded mb-3" 
        alt="Profile Image"
      />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce 
        posuere augue in purus euismod, a tincidunt velit elementum. 
      </p>
    </div>
    <!-- Column 2 -->
    <div class="col-lg-4 mb-4">
      <h2 class="mb-4">Our Story</h2>
      <p>
        Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed 
        odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget 
        quam.
      </p>
    </div>
    <!-- Column 3 -->
    <div class="col-lg-4 mb-4">
      <h2 class="mb-4">Upcoming Content</h2>
      <ul class="list-group">
        <li class="list-group-item">Next Video: Advanced Bootstrap</li>
        <li class="list-group-item">New Blog Post: CSS Grid Tips</li>
        <li class="list-group-item">Live Stream: Q&A Session</li>
      </ul>
    </div>
  </div>
</div>

6. Creating the Videos Section (Cards)

Cards are a great way to showcase content like videos, articles, or products. Bootstrap cards offer a variety of styles and layouts.

Create a heading for the section and center it.
Use a .row and multiple .col-md-6 .col-lg-4 to create responsive columns.
Insert the Card component code inside each column.

Example Video Section code:

<!-- Videos Section -->
<div class="container">
  <h2 class="text-center text-muted my-4">Videos</h2>
  <div class="row">
    <!-- Card 1 -->
    <div class="col-md-6 col-lg-4 mb-4">
      <div class="card">
        <img 
          src="images/video1.jpg" 
          class="card-img-top" 
          alt="Video 1"
        />
        <div class="card-body">
          <h5 class="card-title">Video Title 1</h5>
          <p class="card-text">
            Short description for video 1 content.
          </p>
          <a href="#" class="btn btn-primary">Watch Now</a>
        </div>
      </div>
    </div>
    <!-- Card 2 -->
    <div class="col-md-6 col-lg-4 mb-4">
      <div class="card">
        <img 
          src="images/video2.jpg" 
          class="card-img-top" 
          alt="Video 2"
        />
        <div class="card-body">
          <h5 class="card-title">Video Title 2</h5>
          <p class="card-text">
            Short description for video 2 content.
          </p>
          <a href="#" class="btn btn-primary">Watch Now</a>
        </div>
      </div>
    </div>
    <!-- Card 3 -->
    <div class="col-md-6 col-lg-4 mb-4">
      <div class="card">
        <img 
          src="images/video3.jpg" 
          class="card-img-top" 
          alt="Video 3"
        />
        <div class="card-body">
          <h5 class="card-title">Video Title 3</h5>
          <p class="card-text">
            Short description for video 3 content.
          </p>
          <a href="#" class="btn btn-primary">Watch Now</a>
        </div>
      </div>
    </div>
    <!-- Repeat cards as needed -->
  </div>
</div>

7. Setting Up the Newsletter Section

Offer a place for users to subscribe to your newsletter or email list.

Create a new .row within the container.
Use two columns.
For the form, Input group helps combine a label and a button next to the text field neatly.

Example Newsletter Section code:

<!-- Newsletter Section -->
<div class="container py-4">
  <div class="row">
    <!-- Text Column -->
    <div class="col-md-7 mb-3">
      <h2>Stay Updated</h2>
      <p>Join our newsletter for the latest articles, videos, and more.</p>
    </div>
    <!-- Form Column -->
    <div class="col-md-5 d-flex align-items-center">
      <div class="w-100">
        <label for="newsletter-email" class="form-label visually-hidden">
          Email address
        </label>
        <div class="input-group">
          <input 
            type="email" 
            class="form-control" 
            placeholder="Enter your email" 
            aria-label="Email"
            id="newsletter-email"
          />
          <button class="btn btn-primary" type="button">
            Subscribe
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

8. Creating the Footer

A footer can contain additional navigation, social media links, or copyright.

Use a .row and columns to structure the footer content.
A drop-up menu is just a dropdown with an upward direction (dropup) class in Bootstrap 5.

Example Footer code:

<!-- Footer -->
<footer class="bg-light py-3">
  <div class="container">
    <div class="row">
      <!-- Left Column (col-md-7) -->
      <div class="col-md-7 mb-3">
        <!-- Base Nav -->
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link text-muted" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-muted" href="#">Blog</a>
          </li>
          <!-- Drop-up Menu -->
          <li class="nav-item dropup">
            <a 
              class="nav-link dropdown-toggle text-muted" 
              href="#" 
              data-bs-toggle="dropdown" 
              aria-expanded="false"
            >
              Social Media
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Facebook</a></li>
              <li><a class="dropdown-item" href="#">Twitter</a></li>
              <li><a class="dropdown-item" href="#">Instagram</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- Right Column (col-md-5, text-end) -->
      <div class="col-md-5 text-end">
        <p class="text-muted mb-0">
          © 2025 CodingMoney. All rights reserved.
        </p>
      </div>
    </div>
  </div>
</footer>

9. Conclusion

Congratulations! You’ve built a simple yet powerful responsive website template using Bootstrap 5. We covered:

Adding a navigation bar and drop-down menus.
Creating a carousel for prominent images or announcements.
Using the grid system to structure content.
Displaying cards for showcasing videos or other content.
Building a newsletter section to capture email leads.
Designing a clean footer with navigation and drop-up menus.

With Bootstrap, you can modify colors, spacing, and layout features to fit your branding. This template is an excellent starting point for almost any modern website project—feel free to customize it as you see fit!

If you have any questions or suggestions, leave a comment or reach out via your preferred social media platform. For more in-depth tutorials and best practices, be sure to subscribe and follow along!

Next Steps

Experiment with different Bootstrap components like modals, accordion, or off-canvas menus.
Add more custom CSS to personalize the look even further.
Optimize images and check your SEO using relevant plugins or tools.

Thank you for following this tutorial. Happy coding!

Get in touch

Introduction

What Is Bootstrap?

Table of Contents

1. Project Setup

2. Linking Bootstrap via CDN

3. Creating the Navigation Bar

4. Adding a Carousel

5. Building the About Section

6. Creating the Videos Section (Cards)

7. Setting Up the Newsletter Section

8. Creating the Footer

9. Conclusion

Next Steps

Social Share

Categories

Recent Posts

How to Make Money with AI Agents: Top 5 Business Ideas

Vibe Coding 101 with Cursor AI – Full Crash Course Video Tutorial

Newsletter

Get in touch

Introduction

What Is Bootstrap?

Table of Contents

1. Project Setup

2. Linking Bootstrap via CDN

3. Creating the Navigation Bar

4. Adding a Carousel

5. Building the About Section

6. Creating the Videos Section (Cards)

7. Setting Up the Newsletter Section

8. Creating the Footer

9. Conclusion

Next Steps

Related to Tutorials

Related Tags

Social Share

How to Make Money with AI Agents: Top 5 Business Ideas

Vibe Coding 101 with Cursor AI – Full Crash Course Video Tutorial