Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

Landing Page Project

Project Goal: Create a modern, responsive landing page for a SaaS product using Bootstrap 5.

Project Overview

This project demonstrates how to build a complete landing page for a software product using Bootstrap 5 components and utilities. The page includes a hero section, features, testimonials, pricing, and a footer.

Features Included

Responsive navbar with dropdown
Hero section with CTA buttons
Features grid with icons
Testimonials carousel
Pricing cards with toggle
FAQ accordion
Contact form
Footer with links

Technologies Used

Bootstrap 5 Grid System
Bootstrap Components
Font Awesome Icons
Custom CSS
Responsive Design
Mobile-First Approach

Complete Landing Page Code

HTML Structure

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <i class="fas fa-rocket"></i> TechStart
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <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="#">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        <li class="nav-item">
          <a class="btn btn-primary ms-2" href="#">Get Started</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Hero Section -->
<section class="hero bg-primary text-white py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <h1 class="display-4 fw-bold mb-3">Build Amazing Products Faster</h1>
        <p class="lead mb-4">Our platform helps developers and teams build, deploy, and scale applications with ease.</p>
        <div class="d-flex gap-3">
          <a href="#" class="btn btn-light btn-lg">Start Free Trial</a>
          <a href="#" class="btn btn-outline-light btn-lg">View Demo</a>
        </div>
      </div>
      <div class="col-lg-6">
        <img src="https://via.placeholder.com/600x400" class="img-fluid rounded shadow" alt="Dashboard Preview">
      </div>
    </div>
  </div>
</section>

<!-- Features Section -->
<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold">Powerful Features</h2>
      <p class="lead text-muted">Everything you need to build amazing applications</p>
    </div>
    
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm">
          <div class="card-body text-center p-4">
            <div class="feature-icon bg-primary bg-gradient text-white rounded-circle p-3 mb-3 mx-auto" style="width: 70px; height: 70px;">
              <i class="fas fa-bolt fa-2x"></i>
            </div>
            <h4 class="card-title">Fast Development</h4>
            <p class="card-text">Build applications 10x faster with our pre-built components and templates.</p>
          </div>
        </div>
      </div>
      
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm">
          <div class="card-body text-center p-4">
            <div class="feature-icon bg-success bg-gradient text-white rounded-circle p-3 mb-3 mx-auto" style="width: 70px; height: 70px;">
              <i class="fas fa-shield-alt fa-2x"></i>
            </div>
            <h4 class="card-title">Enterprise Security</h4>
            <p class="card-text">Bank-level security with encryption, backups, and compliance built-in.</p>
          </div>
        </div>
      </div>
      
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm">
          <div class="card-body text-center p-4">
            <div class="feature-icon bg-info bg-gradient text-white rounded-circle p-3 mb-3 mx-auto" style="width: 70px; height: 70px;">
              <i class="fas fa-mobile-alt fa-2x"></i>
            </div>
            <h4 class="card-title">Mobile Ready</h4>
            <p class="card-text">Fully responsive designs that work perfectly on all devices.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Pricing Section -->
<section class="bg-light py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="display-5 fw-bold">Simple, Transparent Pricing</h2>
      <p class="lead text-muted">Choose the plan that's right for your business</p>
      
      <div class="btn-group mt-3" role="group">
        <input type="radio" class="btn-check" name="pricing" id="monthly" checked>
        <label class="btn btn-outline-primary" for="monthly">Monthly</label>
        
        <input type="radio" class="btn-check" name="pricing" id="yearly">
        <label class="btn btn-outline-primary" for="yearly">Yearly (Save 20%)</label>
      </div>
    </div>
    
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow">
          <div class="card-body p-4">
            <span class="badge bg-primary rounded-pill mb-3">Starter</span>
            <h3 class="card-title">$29<span class="text-muted fs-6">/month</span></h3>
            <p class="card-text">Perfect for small teams and startups</p>
            
            <ul class="list-unstyled mb-4">
              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Up to 10 users</li>
              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> 50GB storage</li>
              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Basic analytics</li>
              <li class="mb-2"><i class="fas fa-times text-muted me-2"></i> Priority support</li>
            </ul>
            
            <a href="#" class="btn btn-outline-primary w-100">Get Started</a>
          </div>
        </div>
      </div>
      
      <div class="col-md-4">
        <div class="card h-100 border-primary border-2 shadow">
          <div class="card-body p-4">
            <span class="badge bg-warning text-dark rounded-pill mb-3">Most Popular</span>
            <span class="badge bg-primary rounded-pill mb-3">Professional</span>
            <h3 class="card-title">$79<span class="text-muted fs-6">/month</span></h3>
            <p class="card-text">Best for growing businesses</p>
            
            <ul class="list-unstyled mb-4">
              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Up to 50 users</li>
              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> 200GB storage</li>
              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Advanced analytics</li>
              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Priority support</li>
            </ul>
            
            <a href="#" class="btn btn-primary w-100">Get Started</a>
          </div>
        </div>
      </div>
      
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow">
          <div class="card-body p-4">
            <span class="badge bg-primary rounded-pill mb-3">Enterprise</span>
            <h3 class="card-title">$199<span class="text-muted fs-6">/month</span></h3>
            <p class="card-text">For large organizations</p>
            
            <ul class="list-unstyled mb-4">
              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Unlimited users</li>
              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> 1TB storage</li>
              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Custom analytics</li>
              <li class="mb-2"><i class="fas fa-check text-success me-2"></i> 24/7 support</li>
            </ul>
            
            <a href="#" class="btn btn-outline-primary w-100">Contact Sales</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="bg-dark text-white py-5">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 mb-4 mb-lg-0">
        <h3 class="mb-3"><i class="fas fa-rocket"></i> TechStart</h3>
        <p class="text-white-50">Building the future of application development, one line of code at a time.</p>
        <div class="d-flex gap-3 mt-4">
          <a href="#" class="text-white-50"><i class="fab fa-twitter fa-lg"></i></a>
          <a href="#" class="text-white-50"><i class="fab fa-facebook fa-lg"></i></a>
          <a href="#" class="text-white-50"><i class="fab fa-linkedin fa-lg"></i></a>
          <a href="#" class="text-white-50"><i class="fab fa-github fa-lg"></i></a>
        </div>
      </div>
      
      <div class="col-lg-2 col-md-4 mb-4 mb-md-0">
        <h5 class="mb-3">Product</h5>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Features</a></li>
          <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Pricing</a></li>
          <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">API</a></li>
          <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Documentation</a></li>
        </ul>
      </div>
      
      <div class="col-lg-2 col-md-4 mb-4 mb-md-0">
        <h5 class="mb-3">Company</h5>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">About</a></li>
          <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Blog</a></li>
          <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Careers</a></li>
          <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Contact</a></li>
        </ul>
      </div>
      
      <div class="col-lg-4 col-md-4">
        <h5 class="mb-3">Stay Updated</h5>
        <p class="text-white-50">Subscribe to our newsletter for the latest updates.</p>
        <div class="input-group mb-3">
          <input type="email" class="form-control" placeholder="Enter your email">
          <button class="btn btn-primary" type="button">Subscribe</button>
        </div>
      </div>
    </div>
    
    <hr class="my-4 text-white-50">
    
    <div class="row">
      <div class="col-md-6">
        <p class="text-white-50 mb-0">&copy; 2024 TechStart. All rights reserved.</p>
      </div>
      <div class="col-md-6 text-md-end">
        <a href="#" class="text-white-50 text-decoration-none me-3">Privacy Policy</a>
        <a href="#" class="text-white-50 text-decoration-none">Terms of Service</a>
      </div>
    </div>
  </div>
</footer>

Key Bootstrap Components Used

Component	Usage	Location
`Navbar`	Main navigation with responsive toggler	Top of page
`Hero Section`	Jumbotron-style introduction	After navigation
`Cards`	Features and pricing display	Features & Pricing sections
`Grid System`	Responsive layout for all sections	Throughout the page
`Buttons`	CTA buttons with different styles	Multiple locations
`Badges`	Plan labels and popular badge	Pricing cards
`Form Controls`	Newsletter subscription	Footer section
`Utility Classes`	Spacing, colors, typography	Throughout the page

Responsive Design Features

📱

Mobile First

Designed for mobile devices first, then enhanced for larger screens.

💻

Responsive Grid

Uses Bootstrap's 12-column grid system for perfect layouts on all devices.

🎨

Consistent Styling

Maintains visual consistency across all screen sizes.

Custom CSS for Enhancement

Additional Styling

/* Custom CSS for Landing Page */
.hero {
  background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
}

.feature-icon {
  transition: transform 0.3s ease;
}

.feature-icon:hover {
  transform: translateY(-5px);
}

.pricing-card:hover {
  transform: translateY(-10px);
  transition: transform 0.3s ease;
}

/* Custom button styles */
.btn-gradient {
  background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
  border: none;
  color: white;
}

.btn-gradient:hover {
  background: linear-gradient(45deg, #2575fc 0%, #6a11cb 100%);
  color: white;
}

/* Animation for hero section */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-content {
  animation: fadeInUp 1s ease-out;
}

/* Responsive typography */
@media (max-width: 768px) {
  .display-4 {
    font-size: 2.5rem;
  }
  
  .hero {
    padding: 3rem 0;
  }
}

/* Accessibility improvements */
:focus {
  outline: 3px solid rgba(13, 110, 253, 0.5);
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .navbar, .btn, footer {
    display: none;
  }
}

Performance Optimization Tips

Best Practices for Production

Use Bootstrap CDN for faster loading
Optimize images with proper sizing and compression
Minify CSS and JavaScript files
Use lazy loading for images below the fold
Implement proper caching strategies
Use Bootstrap's utility classes instead of custom CSS when possible
Test on multiple browsers and devices

Interactive Elements

JavaScript Integration

Add interactivity to your landing page:

Smooth scrolling for anchor links
Form validation
Price toggle functionality
Scroll animations
Count-up animations for statistics

Third-Party Integrations

Enhance your landing page with:

Google Analytics for tracking
Mailchimp for newsletter
Hotjar for user behavior
Social media widgets
Live chat support

NextIntroduction

→

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

Bootstrap 5 Tutorial

Bootstrap 5 Tutorial