Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

Bootstrap Page Template

Put the pieces together.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯

A typical landing page combines a navbar, a hero section, a feature grid and a footer, all built from Bootstrap classes.

Use this template as a starting point for your own projects. Change the text, colours and images to make it yours.

For a unique look, override Bootstrap's CSS variables (e.g. --bs-primary) or customise it with Sass.

Key Takeaways: Bootstrap Page Template

Mastering Bootstrap Page Template helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

Bootstrap Page Template Code Example

Bootstrap 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar bg-white border-bottom">
  <div class="container"><a class="navbar-brand fw-bold text-primary" href="#">MyStartup</a><a class="btn btn-primary btn-sm" href="#">Get started</a></div>
</nav>

<header class="py-5 text-center text-white" style="background: linear-gradient(135deg,#071A2F,#2563EB);">
  <div class="container">
    <h1 class="display-5 fw-bold">Build faster with Bootstrap</h1>
    <p class="lead opacity-75">Responsive, accessible and ready in minutes.</p>
    <a href="#" class="btn btn-light btn-lg">Try it free</a>
  </div>
</header>

<section class="container py-5">
  <div class="row g-4 text-center">
    <div class="col-md-4"><h3>⚡ Fast</h3><p class="text-body-secondary">Pre-built components.</p></div>
    <div class="col-md-4"><h3>📱 Responsive</h3><p class="text-body-secondary">Mobile-first grid.</p></div>
    <div class="col-md-4"><h3>🎨 Customisable</h3><p class="text-body-secondary">Themes with CSS variables.</p></div>
  </div>
</section>

<footer class="py-3 bg-dark text-white-50 text-center small">© 2026 MyStartup</footer>
Free sign-in required · Google login available

Bootstrap Page Template Practice Exercises

Check what you learned in “Bootstrap Page Template”.

/ 3 solved
Fill in the blank

Use the grid gutter class to add space between columns.

<div class="row ">
✓ Correct! Not quite. Try again.
Multiple choice

How can you change Bootstrap's primary colour site-wide?

✓ Correct! Not quite. Try again.
Code challenge

Add a <header> with the classes "py-5 text-center" containing an h1 "My Startup".

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
Bootstrap Utilities
Next ❯
Bootstrap Accordion and Collapse

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services