EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Practical Project: Enterprise Website Homepage

1. Lesson Introduction

(1) Prerequisites

(2) 🎯 What You Will Learn

(3) Pain Point

Alice faces a blank page and needs to build a complete enterprise website homepage from scratch—the navbar, Hero, feature cards, team introduction, contact form, and footer. Each module requires careful design, and she doesn't know where to start.

(4) Solution

This lesson comprehensively applies the knowledge learned in the previous 18 lessons to build a complete enterprise website homepage from scratch. Alice is completing a full Bootstrap project independently for the first time—she will use the template from this lesson to create her own portfolio website.

Understanding Method: Practice = Building a house with blocks—each component learned earlier (navbar, card, carousel, form) is a block. Now, we combine them into a complete page.

(5) Benefit

Through the template in this lesson, Alice successfully builds a complete responsive enterprise website homepage. All modules reuse Bootstrap components, the code is clean and standardized, and only the content needs to be replaced for production use.

2. Project Overview

We will build an enterprise website homepage containing the following modules:

100% 
graph TD
    A[Navbar - Fixed Top] --> B[Hero Banner - Full-width background + CTA]
    B --> C[Features - Three cards]
    C --> D[About - Mixed text and image]
    D --> E[Team - Four member cards]
    E --> F[Contact Form - Form + Information]
    F --> G[Footer - Links + Copyright]

Output: Bootstrap 5.3 style effective component effects (like buttons, cards, carousels, collapse, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Example: Complete Enterprise Website Template

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Acme Corp - Home</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="bi bi-box me-2"></i>Acme Corp</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#hero">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="#team">Team</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <section id="hero" class="bg-primary text-white py-5 mt-5">
    <div class="container text-center py-5">
      <h1 class="display-4 fw-bold">Build Faster with Bootstrap</h1>
      <p class="lead mb-4">A modern, responsive framework for your next project.</p>
      <a href="#features" class="btn btn-light btn-lg px-4">Learn More</a>
      <a href="#contact" class="btn btn-outline-light btn-lg px-4 ms-2">Contact Us</a>
    </div>
  </section>

  <!-- Features -->
  <section id="features" class="py-5">
    <div class="container">
      <h2 class="text-center mb-5">Why Choose Us</h2>
      <div class="row g-4">
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-lightning-charge-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Fast Performance</h5>
              <p class="card-text text-body-secondary">Optimized for speed with minimal CSS and JS footprint.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-phone-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Fully Responsive</h5>
              <p class="card-text text-body-secondary">Works flawlessly on mobile, tablet, and desktop.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 text-center p-4 border-0 shadow-sm">
            <i class="bi bi-palette-fill text-primary fs-1"></i>
            <div class="card-body">
              <h5 class="card-title">Customizable</h5>
              <p class="card-text text-body-secondary">Easy to theme with Sass variables and CSS custom properties.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- About -->
  <section class="py-5 bg-light">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <img src="https://via.placeholder.com/600x400/0d6efd/fff?text=About+Us" class="img-fluid rounded-3 shadow" alt="About">
        </div>
        <div class="col-lg-6">
          <h2>About Our Company</h2>
          <p class="lead text-body-secondary">We have been building web solutions since 2015.</p>
          <p>Our team of experienced developers uses Bootstrap to create fast, reliable, and beautiful web applications for clients worldwide.</p>
          <ul class="list-unstyled">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>200+ projects delivered</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>50+ enterprise clients</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>99% client satisfaction</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Team -->
  <section id="team" class="py-5">
    <div class="container">
      <h2 class="text-center mb-5">Meet Our Team</h2>
      <div class="row g-4">
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/0d6efd/fff?text=AW" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Alice">
            <div class="card-body">
              <h5 class="card-title">Alice Wang</h5>
              <p class="card-text text-body-secondary">CEO & Founder</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/198754/fff?text=BC" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Bob">
            <div class="card-body">
              <h5 class="card-title">Bob Chen</h5>
              <p class="card-text text-body-secondary">CTO</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/dc3545/fff?text=CL" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Charlie">
            <div class="card-body">
              <h5 class="card-title">Charlie Li</h5>
              <p class="card-text text-body-secondary">Lead Developer</p>
            </div>
          </div>
        </div>
        <div class="col-6 col-lg-3">
          <div class="card text-center border-0">
            <img src="https://via.placeholder.com/150/6f42c1/fff?text=DY" class="rounded-circle mx-auto mt-3" width="120" height="120" alt="Diana">
            <div class="card-body">
              <h5 class="card-title">Diana Yang</h5>
              <p class="card-text text-body-secondary">UX Designer</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact -->
  <section id="contact" class="py-5 bg-light">
    <div class="container">
      <h2 class="text-center mb-5">Get In Touch</h2>
      <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
          <form class="needs-validation" novalidate>
            <div class="mb-3">
              <label class="form-label">Name</label>
              <input type="text" class="form-control" required>
              <div class="invalid-feedback">Please enter your name.</div>
            </div>
            <div class="mb-3">
              <label class="form-label">Email</label>
              <input type="email" class="form-control" required>
              <div class="invalid-feedback">Please enter a valid email.</div>
            </div>
            <div class="mb-3">
              <label class="form-label">Message</label>
              <textarea class="form-control" rows="4" required></textarea>
              <div class="invalid-feedback">Please enter a message.</div>
            </div>
            <button class="btn btn-primary w-100" type="submit">Send Message</button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-dark text-white py-4">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <p class="mb-0">&copy; 2026 Acme Corp. All rights reserved.</p>
        </div>
        <div class="col-md-6 text-md-end">
          <a href="#" class="text-white me-3"><i class="bi bi-twitter-x"></i></a>
          <a href="#" class="text-white me-3"><i class="bi bi-github"></i></a>
          <a href="#" class="text-white"><i class="bi bi-linkedin"></i></a>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    (function() {
      var forms = document.querySelectorAll('.needs-validation')
      Array.prototype.slice.call(forms).forEach(function(form) {
        form.addEventListener('submit', function(event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
    })()
  </script>
</body>
</html>
▶ Try it Yourself

Output: Bootstrap 5.3 style effective component effects (like buttons, cards, carousels, collapse, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

3. Module Breakdown

Module Components/Utility Classes Used Technical Points
Navbar navbar-expand-lg fixed-top scroll Fixed at the top, internal links smooth scroll
Hero display-4 lead btn-lg bg-primary Full-width background + dual CTA buttons
Features card h-100 shadow-sm row-cols-* Three equal-height cards, zero JS
About row align-items-center img-fluid Text and image side-by-side, responsive wrap
Team rounded-circle card border-0 Responsive four-member grid
Form form-control needs-validation Complete form validation
Footer bg-dark flex text-md-end Responsive left-right columns

4. Module Variations & Extensions

▶ Example: Hero Section Variations

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hero Variations</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <!-- Hero Type 1: Centered Text -->
  <section class="bg-primary text-white py-5">
    <div class="container text-center py-4">
      <h1 class="display-4 fw-bold">Centered Hero</h1>
      <p class="lead mb-4">Simple centered text with CTA buttons.</p>
      <a href="#" class="btn btn-light btn-lg px-4">Get Started</a>
    </div>
  </section>

  <!-- Hero Type 2: Split Image + Text -->
  <section class="bg-dark text-white py-5">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <h1 class="display-5 fw-bold">Split Layout Hero</h1>
          <p class="lead mb-4">Text on left, image on right. Great for product pages.</p>
          <a href="#" class="btn btn-warning btn-lg">Learn More</a>
        </div>
        <div class="col-lg-6 text-center">
          <i class="bi bi-laptop display-1 text-warning"></i>
        </div>
      </div>
    </div>
  </section>

  <!-- Hero Type 3: Background Image -->
  <section class="py-5" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://via.placeholder.com/1200x400/333/fff?text=BG'); background-size: cover; background-position: center;">
    <div class="container text-center py-5 text-white">
      <p class="text-uppercase small fw-bold text-warning">Limited Offer</p>
      <h1 class="display-4 fw-bold">Background Image Hero</h1>
      <p class="lead mb-4">With overlay gradient for readability.</p>
      <div class="d-flex justify-content-center gap-2">
        <a href="#" class="btn btn-warning btn-lg px-4">Shop Now</a>
        <a href="#" class="btn btn-outline-light btn-lg px-4">Learn More</a>
      </div>
    </div>
  </section>
</body>
</html>
▶ Try it Yourself

Output: Bootstrap 5.3 style effective component effects (like buttons, cards, carousels, collapse, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Example: Feature Grid with Icons

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feature Grid with Icons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-5">Why Choose Us</h2>
    <div class="row g-4">
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-rocket-takeoff fs-2 text-primary"></i>
          </div>
          <h5>Fast Delivery</h5>
          <p class="text-body-secondary small">Lightning-fast deployment with global CDN.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-success bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-shield-check fs-2 text-success"></i>
          </div>
          <h5>Secure</h5>
          <p class="text-body-secondary small">Enterprise-grade security built-in.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-warning bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-graph-up-arrow fs-2 text-warning"></i>
          </div>
          <h5>Scalable</h5>
          <p class="text-body-secondary small">Grows with your business, no limits.</p>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <div class="rounded-circle bg-info bg-opacity-10 d-inline-flex p-3 mx-auto mb-3">
            <i class="bi bi-headset fs-2 text-info"></i>
          </div>
          <h5>24/7 Support</h5>
          <p class="text-body-secondary small">Round-the-clock expert assistance.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Output: Bootstrap 5.3 style effective component effects (like buttons, cards, carousels, collapse, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testimonial Carousel</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-5">What Our Clients Say</h2>
    <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="2"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-primary"></i>
            <p class="lead mb-4">"Bootstrap transformed our development workflow. We shipped the MVP in 2 weeks instead of 2 months."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/0d6efd/fff?text=JD" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>John Doe</strong>
                <small class="d-block text-body-secondary">CEO, TechStart</small>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-success"></i>
            <p class="lead mb-4">"The responsive components saved us countless hours. Everything just works across all devices."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/198754/fff?text=JS" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>Jane Smith</strong>
                <small class="d-block text-body-secondary">CTO, WebFlow Inc</small>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="card text-center p-5 mx-auto border-0" style="max-width:600px;">
            <i class="bi bi-quote fs-1 text-warning"></i>
            <p class="lead mb-4">"Sass customization was a game-changer. We matched our brand perfectly without fighting the framework."</p>
            <div class="d-flex align-items-center justify-content-center gap-3">
              <img src="https://via.placeholder.com/60/dc3545/fff?text=MW" class="rounded-circle" width="50" height="50" alt="Avatar">
              <div class="text-start">
                <strong>Mike Wang</strong>
                <small class="d-block text-body-secondary">Lead Dev, DesignCo</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ Try it Yourself

Output: Bootstrap 5.3 style effective component effects (like buttons, cards, carousels, collapse, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Example: Pricing Table Section

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Table</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-5">
    <h2 class="text-center mb-2">Pricing Plans</h2>
    <p class="text-center text-body-secondary mb-5">Choose the plan that fits your needs.</p>
    <div class="row g-4 justify-content-center">
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <h5 class="text-body-secondary">Starter</h5>
          <div class="display-4 fw-bold my-3">$9</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>1 project</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>5GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Basic support</li>
            <li class="mb-2 text-body-tertiary"><i class="bi bi-x-circle-fill me-2"></i>Advanced analytics</li>
          </ul>
          <button class="btn btn-outline-primary w-100 mt-auto">Get Started</button>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-primary border-2 shadow">
          <div class="badge bg-primary text-uppercase mb-2" style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);">Popular</div>
          <h5>Professional</h5>
          <div class="display-4 fw-bold my-3">$29</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>10 projects</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>50GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Priority support</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Advanced analytics</li>
          </ul>
          <button class="btn btn-primary w-100 mt-auto">Get Started</button>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card h-100 text-center p-4 border-0 shadow-sm">
          <h5 class="text-body-secondary">Enterprise</h5>
          <div class="display-4 fw-bold my-3">$99</div>
          <p class="text-body-secondary">per month</p>
          <ul class="list-unstyled text-start mb-4">
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Unlimited projects</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>500GB storage</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>24/7 support</li>
            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Custom integrations</li>
          </ul>
          <button class="btn btn-outline-primary w-100 mt-auto">Contact Us</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Output: Bootstrap 5.3 style effective component effects (like buttons, cards, carousels, collapse, etc.). The page uses the Bootstrap default theme (light) and responsive grid by default.

(1) Page Component Reference Table

Section Recommended Component Utility Class Combination Responsive Usage
Hero container + display-* bg-primary text-white py-5 text-center text-md-start
Feature Card card + row-cols-* border-0 shadow-sm h-100 col-12 col-md-4
About row align-items-center img-fluid rounded-3 shadow col-lg-6 stacking
Team card + rounded-circle border-0 text-center col-6 col-lg-3
Testimonials carousel + card border-0 p-5 mx-auto d-none d-md-block
Pricing card + list-unstyled border-primary shadow col-lg-3 col-md-6
Form form-control + needs-validation w-100 mb-3 col-md-8 col-lg-6
Footer bg-dark text-white py-4 text-md-end col-md-6 columns

(2) Responsive Breakpoint Reference Table

Breakpoint Class Prefix Minimum Width Target Device
X-Small None < 576px Mobile portrait
Small sm ≥ 576px Mobile landscape
Medium md ≥ 768px Tablet
Large lg ≥ 992px Laptop
X-Large xl ≥ 1200px Desktop monitor
XX-Large xxl ≥ 1400px Widescreen monitor
This template uses md / lg MD + LG Covers tablet to desktop

(3) Color Scheme Mapping Table

CSS Variable Default Value Brand Color Example Usage
--bs-primary #0d6efd #6f42c1 (purple) Primary buttons, links, accent color
--bs-secondary #6c757d #adb5bd (gray) Secondary text, auxiliary information
--bs-success #198754 #20c997 (cyan) Success state, completion feedback
--bs-warning #ffc107 #fd7e14 (orange) Warning, attention, promotion markers
--bs-danger #dc3545 #e83e8c (pink) Error, delete, high risk
--bs-info #0dcaf0 #0d6efd (blue) Informational alerts, guidance markers
--bs-light #f8f9fa #f8f9fa Light background area
--bs-dark #212529 #1a1a2e Footer, dark area

❓ Frequently Asked Questions

Q Can this enterprise website be used directly for production?
A The template can be used directly, but it is recommended to: (1) Replace placeholder images with real content; (2) Modify Sass variables according to brand colors; (3) Add actual backend form processing logic; (4) Add SEO meta tags.
Q How can I make the page more personalized?
A Sass customization in Phase 5 can achieve brand colors, custom fonts, and global spacing modifications. You can also quickly override Bootstrap defaults using CSS variables.
Q How does the navbar active state update with scrolling?
A You need JavaScript to listen to scroll events, combined with IntersectionObserver to determine the currently visible section. This is not a built-in Bootstrap feature, but can be achieved with third-party libraries.
Q How does this template adapt to different screens?
A The template is inherently responsive: col-md-4 automatically stacks on mobile, navbar-expand-lg collapses into a hamburger menu on narrow screens, and img-fluid makes images responsive. To enhance adaptation, you can add breakpoint classes like col-12 col-sm-6 col-lg-3 to control the number of columns on different screens, or use d-none d-md-block to hide secondary modules on mobile.
Q How much Bootstrap default style vs. custom CSS should I use in a project?
A The 80/20 principle is recommended: 80% Bootstrap utility classes and components, 20% custom CSS. First, use utility classes for layout and spacing, override brand colors with Sass variables, and finally add custom CSS for special effects. Avoid turning your Bootstrap project into "full custom CSS"—that would lose the framework's efficiency advantages.

📖 Summary

📝 Assignments

  1. ⭐ Based on this lesson's template, create a personal portfolio homepage: Replace the brand name with your name, change the Hero section to "Hi, I'm [Your Name]", change the features section to your skill tags, and change the team section to showcase your projects.
  2. ⭐⭐ Add a new "Testimonials" carousel module to the template using the carousel + card combination.
  3. ⭐⭐⭐ Add scroll animations: Use Bootstrap's data-bs-* attributes or simple CSS @keyframes to make page modules fade in when loading.

Previous Lesson: Utility Classes · Next Lesson: Sass Customization

Web-Tutorial.com

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏