← Back to Module

Bootstrap Components & Customization

CMU529: Advanced Web Development - Session 3

Birmingham Newman University

Lecturer: James Williams

Advanced styling and component usage for e-commerce

3-hour session • 25 slides • 2 interactive tasks

Session Timeline:

  • 10 min: Registration & waiting
  • 20 min: Opening slides
  • 45 min: Task 1
  • 15 min: Break/Catch up
  • 20 min: Secondary slides
  • 45 min: Task 2
  • Remaining: Self-study

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

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>

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>

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>

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>

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>

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