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 • 30+ slides • 6 live demos • 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 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!

Front View

Premium wireless headphones - front perspective

Side View

Showcasing the sleek design and premium materials

Detail View

Close-up of the premium leather cushions

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!

20% OFF

Wireless Headphones

Premium sound quality with active noise cancellation.

$199.99 $249.99

NEW

Smart Watch Pro

Track your fitness and stay connected on the go.

$299.99

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

Wireless Headphones

Premium Edition

$199.99

Smart Watch Pro

Space Gray

$599.98

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:

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

Implement responsive behavior for all components
Add hover effects and transitions
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:

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

Implement JavaScript functionality
Add custom styling and animations
Ensure accessibility compliance
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

Bootstrap Components & Customization

CMU529: Advanced Web Development - Session 3

Learning Objectives

Advanced Bootstrap Components

Bootstrap Modal

🎯 Live Demo: Bootstrap Modal

Bootstrap Carousel

🎯 Live Demo: Bootstrap Carousel

Front View

Side View

Detail View

Bootstrap Accordion

🎯 Live Demo: Bootstrap Accordion

📝 Product Description

🔧 Technical Specifications

⭐ Customer Reviews

📦 Shipping & Returns

Bootstrap Tabs

🎯 Live Demo: Bootstrap Tabs

Product Overview

Advanced Features

🎵 Audio Quality

🔇 Noise Cancellation

📱 Smart Controls

🎙️ Crystal Clear Calls

Model Comparison

Customer Support

Bootstrap Customization

Custom Component Classes

Responsive Utilities

E-commerce Layout Patterns

🎯 Live Demo: Interactive Product Cards

Wireless Headphones

Smart Watch Pro

Portable Speaker

🎯 Live Demo: Shopping Cart with JavaScript

Shopping Cart 3

Wireless Headphones

Smart Watch Pro

Portable Speaker

Order Summary

Shopping Cart Interface

Product Filter Sidebar

Task 1: Advanced E-commerce Components

Instructions:

Break Time

15 Minutes

JavaScript Integration

Performance Optimization

Accessibility Best Practices

Cross-browser Compatibility

Task 2: Complete E-commerce Interface

Instructions:

Session Summary

Next Session: