H M < >
CMU529: Advanced Web Development - Session 3

Bootstrap Components & Customization

Full-stack Web Development with PHP and MySQL

James Williams

Birmingham Newman University

jwilliams@staff.newman.ac.uk

3-hour session

Learning Objectives

  • Master advanced Bootstrap components and layouts
  • Learn Bootstrap customization techniques
  • Create custom component variants
  • Build complex e-commerce interfaces
  • Understand responsive design patterns
  • Implement interactive components with JavaScript
  • Experience live code demos: modals, carousels, accordions, tabs, product cards, and shopping carts

Advanced Bootstrap Components

Advanced Components:
Modal Dialogs
Carousel/Slideshow
Accordion/Collapse
Tabs & Pills
Progress Bars
Spinners & Loaders
Toast Notifications
Offcanvas Sidebar
Dropdown Menus
Tooltips & Popovers
  • Interactive components with JavaScript
  • Data attributes for initialization
  • Customizable behavior and styling
  • Accessible by default

Bootstrap Modal

<!-- Modal Trigger -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#productModal">
  View Product Details
</button>
<!-- Modal -->
<div class="modal fade" id="productModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Product Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Product content here...
      </div>
    </div>
  </div>
</div>

🎯 Live Demo: Bootstrap Modal

INTERACTIVE DEMO

Try it yourself: Click the button below to see a modal in action!

Bootstrap Carousel

<div id="productCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="1"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="product1.jpg" class="d-block w-100" alt="Product 1">
    </div>
    <div class="carousel-item">
      <img src="product2.jpg" class="d-block w-100" alt="Product 2">
    </div>
  </div>
</div>

🎯 Live Demo: Bootstrap Carousel

INTERACTIVE DEMO

Try it yourself: Use the arrows or indicators to navigate through product images!

Bootstrap Accordion

<div class="accordion" id="productAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Product Description
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#productAccordion">
      <div class="accordion-body">
        Product details here...
      </div>
    </div>
  </div>
</div>

🎯 Live Demo: Bootstrap Accordion

INTERACTIVE DEMO

Try it yourself: Click on the sections to expand/collapse product information!

Premium Wireless Headphones - Experience crystal-clear audio with our top-of-the-line wireless headphones. Featuring advanced Bluetooth 5.0 technology, active noise cancellation, and an impressive 30-hour battery life. Perfect for music lovers, gamers, and professionals alike.

  • Frequency Response: 20Hz - 20kHz
  • Impedance: 32 Ohms
  • Battery Life: 30 hours (ANC on), 40 hours (ANC off)
  • Charging Time: 2 hours (USB-C fast charging)
  • Weight: 250g
  • Bluetooth Version: 5.0
  • Range: 10 meters

⭐⭐⭐⭐⭐ Amazing sound quality!
by John D. - 2 days ago
Best headphones I've ever owned. The noise cancellation is incredible!
⭐⭐⭐⭐⭐ Perfect for work from home
by Sarah M. - 1 week ago
Comfortable for all-day wear and the battery lasts forever.

Shipping: Free standard shipping on orders over $50. Express shipping available.
Returns: 30-day money-back guarantee. Free return shipping.
Warranty: 2-year manufacturer warranty included.

Bootstrap Tabs

<ul class="nav nav-tabs" id="productTabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details">Details</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews">Reviews</button>
  </li>
</ul>
<div class="tab-content" id="productTabsContent">
  <div class="tab-pane fade show active" id="details">Details content...</div>
  <div class="tab-pane fade" id="reviews">Reviews content...</div>
</div>

🎯 Live Demo: Bootstrap Tabs

INTERACTIVE DEMO

Try it yourself: Click on different tabs to switch between content sections!

Product Overview

Our premium wireless headphones combine cutting-edge technology with exceptional comfort. Whether you're commuting, working, or relaxing, these headphones deliver an unparalleled audio experience.

Key Highlights:

  • Industry-leading noise cancellation
  • 30-hour battery life
  • Premium materials and build quality
  • Available in 4 colors
Advanced Features
🎵 Audio Quality

Custom 40mm drivers deliver rich, detailed sound across all frequencies.

🔇 Noise Cancellation

Advanced ANC technology blocks up to 95% of ambient noise.

📱 Smart Controls

Touch controls for music, calls, and voice assistant activation.

🎙️ Crystal Clear Calls

Dual microphone array with beamforming technology.

Model Comparison
Feature Standard Premium Pro
Battery Life 20h 30h 40h
Noise Cancellation Basic Advanced Premium
Price $99 $199 $299
Customer Support

Need help? We're here for you!

📞 Phone: 1-800-HEADPHONES
✉️ Email: support@example.com
💬 Live Chat: Available 24/7
📚 Documentation: View user manual

Warranty Information:

All products come with a 2-year manufacturer warranty covering defects in materials and workmanship.

Bootstrap Customization

CSS Custom Properties:
:root {
  --bs-primary: #ff6b6b;
  --bs-secondary: #ee5a24;
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #343a40;
}
  • Override Bootstrap's default colors
  • Use CSS custom properties for theming
  • Maintain consistency across components
  • Easy to update and maintain

Custom Component Classes

Custom Button Styles:
.btn-ecommerce {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-ecommerce:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

Responsive Utilities

Responsive Display Classes:
d-none d-md-block
d-block d-md-none
d-flex d-md-none
d-none d-md-flex
Responsive Spacing:
mt-0 mt-md-3
p-2 p-md-4
mx-auto mx-md-0
Responsive Text:
text-center text-md-start
fs-6 fs-md-4
fw-normal fw-md-bold

E-commerce Layout Patterns

Product Grid Layout:
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="product.jpg" class="card-img-top" alt="Product">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Product Name</h5>
        <p class="card-text flex-grow-1">Description...</p>
        <button class="btn btn-primary mt-auto">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

🎯 Live Demo: Interactive Product Cards

INTERACTIVE DEMO

Try it yourself: Hover over cards to see effects and click buttons to interact!

Headphones 20% OFF
Wireless Headphones

Premium sound quality with active noise cancellation.

$199.99 $249.99
Smart Watch NEW
Smart Watch Pro

Track your fitness and stay connected on the go.

$299.99
Speaker HOT
Portable Speaker

Waterproof design with 20-hour battery life.

$79.99

🎯 Live Demo: Shopping Cart with JavaScript

INTERACTIVE DEMO

Try it yourself: Adjust quantities and see the total update in real-time!

Shopping Cart 3
Item
Wireless Headphones
Premium Edition
$199.99
Item
Smart Watch Pro
Space Gray
$599.98
Item
Portable Speaker
Waterproof
$79.99
Order Summary
Subtotal: $879.96
Shipping: $9.99
Tax: $70.40
Total: $960.35

Shopping Cart Interface

Cart Layout Structure:
<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <!-- Cart Items -->
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Shopping Cart</h5>
          <!-- Cart items list -->
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <!-- Order Summary -->
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Order Summary</h5>
          <!-- Summary details -->
        </div>
      </div>
    </div>
  </div>
</div>

Product Filter Sidebar

Filter Sidebar Structure:
<div class="col-md-3">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Filters</h5>
      <!-- Price Range -->
      <div class="mb-3">
        <label class="form-label">Price Range</label>
        <input type="range" class="form-range" min="0" max="1000">
      </div>
      <!-- Categories -->
      <div class="mb-3">
        <label class="form-label">Categories</label>
        <div class="form-check">
          <input class="form-check-input" type="checkbox">
          <label class="form-check-label">Electronics</label>
        </div>
      </div>
    </div>
  </div>
</div>

Task 1: Advanced E-commerce Components

Instructions:

  1. Create an advanced e-commerce product page with:
    • Product image carousel with multiple images
    • Product details in tabs (Description, Specifications, Reviews)
    • Related products accordion
    • Add to cart modal with quantity selector
    • Custom styling using CSS variables
  2. Implement responsive behavior for all components
  3. Add hover effects and transitions
  4. Test all interactive elements

Time: 45 minutes

This task will help you master advanced Bootstrap components

Break Time

15 Minutes

Take a break, ask questions, or catch up on the previous task.

Next: Secondary slides and Task 2

JavaScript Integration

Custom JavaScript for E-commerce:
// Shopping cart functionality
function addToCart(productId, quantity) {
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  cart.push({ id: productId, quantity: quantity });
  localStorage.setItem('cart', JSON.stringify(cart));
  updateCartDisplay();
}
// Update cart display
function updateCartDisplay() {
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  document.getElementById('cart-count').textContent = cart.length;
}

Performance Optimization

  • Lazy Loading: Load images and components as needed
  • CSS Minification: Reduce file sizes
  • Image Optimization: Use appropriate formats and sizes
  • Code Splitting: Load only necessary JavaScript
  • Caching: Implement browser caching strategies
Lazy Loading Example:
<img src="placeholder.jpg" data-src="product.jpg" class="lazy">
// Lazy loading script
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  // Implementation here...
});

Accessibility Best Practices

  • Semantic HTML: Use proper HTML elements
  • ARIA Labels: Provide descriptive labels
  • Keyboard Navigation: Ensure all elements are keyboard accessible
  • Color Contrast: Maintain sufficient contrast ratios
  • Screen Reader Support: Test with screen readers
Accessibility Examples:
<button aria-label="Add product to cart">Add to Cart</button>
<img src="product.jpg" alt="Red running shoes with white sole">
<div role="main" aria-label="Product catalog">
  <!-- Content -->
</div>

Cross-browser Compatibility

  • CSS Prefixes: Use vendor prefixes where needed
  • Feature Detection: Check for browser support
  • Fallbacks: Provide alternative solutions
  • Testing: Test on multiple browsers and devices
Feature Detection Example:
if ('IntersectionObserver' in window) {
  // Use modern lazy loading
  const observer = new IntersectionObserver(callback);
} else {
  // Fallback for older browsers
  loadAllImages();
}

Task 2: Complete E-commerce Interface

Instructions:

  1. Build a complete e-commerce interface with:
    • Responsive navigation with shopping cart icon
    • Product listing with filters and sorting
    • Product detail page with all components
    • Shopping cart page with quantity controls
    • Checkout form with validation
  2. Implement JavaScript functionality
  3. Add custom styling and animations
  4. Ensure accessibility compliance
  5. Test on multiple screen sizes

Time: 45 minutes

This task will help you build a complete e-commerce interface

Session Summary

  • Advanced Bootstrap components enable rich user experiences
  • Customization allows for unique brand identity
  • Responsive design is crucial for modern web applications
  • JavaScript integration adds interactivity
  • Performance and accessibility should be prioritized
  • Cross-browser testing ensures compatibility

Next Session:

PHP Fundamentals & Server Setup - Introduction to server-side programming