Steps:

Create an HTML File: Begin by creating a new HTML file (e.g., index.html) in your project directory.
Include Bootstrap CSS: Within the <head> section of your HTML file, add the following link to include Bootstrap's CSS:

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Include Bootstrap JavaScript: Before the closing </body> tag, add the following scripts to include Bootstrap's JavaScript components:

<script
  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
  integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
  integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
  crossorigin="anonymous"
></script>

Creating Header Section

 <!-- Header -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">TechHub</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" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Creating Hero Section

 <!-- Hero Section -->
    <section class="bg-info text-white text-center" style="padding: 6rem 0">
      <div class="container">
        <h1 class="display-4">Welcome to TechHub</h1>
        <p class="lead">Your go-to place for all things tech – news, reviews, and tutorials!</p>
        <a href="#" class="btn btn-light btn-lg">Learn More</a>
      </div>
    </section>

Creating Features Section

<!-- Features Section -->
    <section class="container my-5">
      <h2 class="text-center mb-4">What We Offer</h2>
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <img
              src="https://via.placeholder.com/350x250"
              class="card-img-top"
              alt="Tech News"
            />
            <div class="card-body">
              <h5 class="card-title">Latest Tech News</h5>
              <p class="card-text">
                Stay updated with the latest technology trends and breaking news from the tech world.
              </p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img
              src="https://via.placeholder.com/350x250"
              class="card-img-top"
              alt="Gadget Reviews"
            />
            <div class="card-body">
              <h5 class="card-title">Gadget Reviews</h5>
              <p class="card-text">
                In-depth reviews of the latest gadgets and tech products to help you make informed decisions.
              </p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img
              src="https://via.placeholder.com/350x250"
              class="card-img-top"
              alt="Tutorials"
            />
            <div class="card-body">
              <h5 class="card-title">Tech Tutorials</h5>
              <p class="card-text">
                Learn how to use new software, troubleshoot common problems, and improve your tech skills.
              </p>
              <a href="#" class="btn btn-primary">Start Learning</a>
            </div>
          </div>
        </div>
      </div>
    </section>

Call To Action Section

<!-- Call to Action Section -->
<section class="bg-success text-white text-center py-5">
  <div class="container">
    <h2 class="display-4">Join Us Today!</h2>
    <p class="lead">Get exclusive access to the latest news, reviews, and tutorials delivered right to your inbox.</p>
    <a href="#signup" class="btn btn-light btn-lg">Sign Up Now</a>
  </div>
</section>

Contact Section

<!-- Contact Form Section -->
    <section class="container my-5" id="contact">
      <h2 class="text-center mb-4">Contact Us</h2>
      <p class="text-center mb-4">
        We'd love to hear from you! Please fill out the form below to get in
        touch with us.
      </p>

      <div class="row">
        <div class="col-md-6">
          <form>
            <div class="mb-3">
              <label for="name" class="form-label">Your Name</label>
              <input
                type="text"
                class="form-control"
                id="name"
                placeholder="Enter your name"
                required
              />
            </div>
            <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"
                required
              />
            </div>
            <div class="mb-3">
              <label for="message" class="form-label">Message</label>
              <textarea
                class="form-control"
                id="message"
                rows="4"
                placeholder="Your message here"
                required
              ></textarea>
            </div>
            <button type="submit" class="btn btn-success btn-lg w-100">
              Send Message
            </button>
          </form>
        </div>
        <div class="col-md-6">
          <div class="d-flex flex-column justify-content-center align-items-center p-4 border rounded shadow-sm bg-light">
            <h5 class="text-primary mb-3">Visit Us</h5>
            <p class="text-muted mb-2">123 Main Street, Suite 100</p>
            <p class="text-muted mb-2">Butwal, Nepal</p>
            <h5 class="text-primary mb-3">Call Us</h5>
            <p class="text-muted">+123 456 7890</p>
          </div>
        </div>

    </section>

Footer Section

<!-- Footer Section -->
    <footer class="bg-dark text-white text-center py-4">
      <p>&copy; 2025 TechHub | All Rights Reserved</p>
    </footer>

How to Create a Website Using Bootstrap (Part 1)

Steps:

Subscribe to my newsletter

Suman Khatri

Suman Khatri