Category: html_css
Build a Complete Landing Page
Published on 06 Aug 2026
Explanation
A Bootstrap Landing Page combines multiple Bootstrap components to create a modern, responsive webpage. A typical landing page includes a navigation bar, hero section, features, testimonials, pricing, contact form, and footer. Using Bootstrap's grid system and utility classes helps build professional layouts quickly.
Code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">HackForge</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Explanation
The Hero Section is the first section visitors see. It should contain a compelling headline, short description, call-to-action buttons, and an attractive image or illustration. Bootstrap's grid system makes it easy to align text and images responsively.
Code:
<section class="container py-5">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-4 fw-bold">Learn Web Development</h1>
<p class="lead">Master HTML, CSS, Bootstrap, React, and Spring Boot with real-world projects.</p>
<a href="#" class="btn btn-primary btn-lg me-2">Get Started</a>
<a href="#" class="btn btn-outline-secondary btn-lg">Learn More</a>
</div>
<div class="col-lg-6 text-center">
<img src="https://via.placeholder.com/500x350" class="img-fluid rounded" alt="Hero Image">
</div>
</div>
</section>
Explanation
The Features section highlights the key benefits of your product or service. Use Bootstrap cards inside the grid system to present features in a clean and responsive layout.
Code:
<section id="features" class="container py-5">
<div class="row g-4">
<div class="col-md-4">
<div class="card text-center shadow-sm">
<div class="card-body">
<h5 class="card-title">Responsive Design</h5>
<p class="card-text">Works perfectly on mobile, tablet, and desktop.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center shadow-sm">
<div class="card-body">
<h5 class="card-title">Easy Customization</h5>
<p class="card-text">Customize components with utility classes.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center shadow-sm">
<div class="card-body">
<h5 class="card-title">Fast Development</h5>
<p class="card-text">Build professional websites in less time.</p>
</div>
</div>
</div>
</div>
</section>
Explanation
A complete landing page often includes a pricing section and a contact form. Bootstrap cards and form components help create attractive pricing plans and user-friendly contact forms without writing custom CSS.
Code:
<section id="pricing" class="container py-5">
<div class="card text-center shadow mx-auto" style="max-width:350px;">
<div class="card-header bg-primary text-white">
<h4>Premium Plan</h4>
</div>
<div class="card-body">
<h2>$29/month</h2>
<p>Unlimited access to all courses.</p>
<button class="btn btn-success">Enroll Now</button>
</div>
</div>
</section>
<section id="contact" class="container py-5">
<form>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Your Name">
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="Your Email">
</div>
<div class="mb-3">
<textarea class="form-control" rows="4" placeholder="Message"></textarea>
</div>
<button class="btn btn-primary">Send Message</button>
</form>
</section>
Explanation
The Footer is the final section of the landing page and typically contains copyright information, quick navigation links, social media icons, and contact details. Include the Bootstrap JavaScript bundle before the closing body tag to enable interactive components such as the navbar, modal, carousel, accordion, and offcanvas.
Code:
<footer class="bg-dark text-white text-center py-4"> <p class="mb-0">© 2026 HackForge Academy. All Rights Reserved.</p> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>