Bootstrap Layout Example: Landing Page

In this chapter we put the parts together and build a small landing page: a navbar, a hero section, three feature cards, a call to action and a footer. Everything uses only Bootstrap classes, and no custom CSS.

The complete page

<nav class="navbar navbar-expand-md bg-dark" data-bs-theme="dark">
  <div class="container">
    <a class="navbar-brand" href="#"><i class="bi bi-rocket-takeoff me-1"></i> LaunchPad</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#lpNav" aria-controls="lpNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="lpNav">
      <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="#features">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<header class="bg-body-tertiary py-5">
  <div class="container text-center">
    <h1 class="display-5 fw-bold">Build faster with Bootstrap</h1>
    <p class="lead col-lg-8 mx-auto">A responsive landing page made only with the Bootstrap classes. No extra CSS file is needed.</p>
    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
      <a href="#" class="btn btn-primary btn-lg px-4">Get started</a>
      <a href="#" class="btn btn-outline-secondary btn-lg px-4">Learn more</a>
    </div>
  </div>
</header>

<section id="features" class="py-5">
  <div class="container">
    <h2 class="text-center mb-4">Features</h2>
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col">
        <div class="card h-100 text-center">
          <div class="card-body">
            <i class="bi bi-phone fs-1 text-primary"></i>
            <h3 class="h5 mt-2">Responsive</h3>
            <p class="card-text">The page works on phones, tablets and desktops.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 text-center">
          <div class="card-body">
            <i class="bi bi-lightning-charge fs-1 text-warning"></i>
            <h3 class="h5 mt-2">Fast to build</h3>
            <p class="card-text">Ready components save a lot of time.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 text-center">
          <div class="card-body">
            <i class="bi bi-palette fs-1 text-success"></i>
            <h3 class="h5 mt-2">Customizable</h3>
            <p class="card-text">Change colors and sizes with variables.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="contact" class="bg-body-tertiary py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <h2 class="text-center mb-4">Contact us</h2>
        <form class="row g-3">
          <div class="col-md-6"><div class="form-floating"><input type="text" class="form-control" id="lpName" placeholder="Name"><label for="lpName">Name</label></div></div>
          <div class="col-md-6"><div class="form-floating"><input type="email" class="form-control" id="lpMail" placeholder="Email"><label for="lpMail">Email</label></div></div>
          <div class="col-12"><div class="form-floating"><textarea class="form-control" id="lpMsg" placeholder="Message" style="height: 100px"></textarea><label for="lpMsg">Message</label></div></div>
          <div class="col-12 d-grid"><button class="btn btn-primary" type="submit">Send message</button></div>
        </form>
      </div>
    </div>
  </div>
</section>

<footer class="bg-dark text-white-50 py-3" data-bs-theme="dark">
  <div class="container d-flex flex-column flex-sm-row justify-content-between">
    <span>&copy; 2026 LaunchPad</span>
    <span>Made with Bootstrap 5.3</span>
  </div>
</footer>

The preview shows only a part of the page. Scroll inside it to see the rest, or open the same code on a real page.

How the page is built

Part	Bootstrap classes used
Navbar	navbar navbar-expand-md, toggler, collapse navbar-collapse, ms-auto to push the links right
Hero section	bg-body-tertiary py-5, display-5, lead, d-grid gap-2 d-sm-flex (stacked buttons on a phone, in a row from sm)
Features	row row-cols-1 row-cols-md-3 g-4 and card h-100 for equal height cards
Contact form	form-floating and the grid row g-3
Footer	d-flex flex-column flex-sm-row justify-content-between

What to improve for a real page

• Add your own logo, images and real text.
• Use a real form action, and validate the form on the server. See Form Validation.
• Add meta tags, a title and a description for SEO.
• Self host or pin the versions of the Bootstrap files, and add the SRI hashes. See Setup and Installation.
• Check the page in dark mode, and on slow connections. See Color Modes.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.