CMU529: Advanced Web Development - Session 2

Bootstrap Framework Fundamentals

Full-stack Web Development with PHP and MySQL

James Williams

Birmingham Newman University

jwilliams@staff.newman.ac.uk

3-hour session

Learning Objectives

Understand what Bootstrap is and its benefits
Learn Bootstrap 5 grid system and responsive design
Master Bootstrap components and utilities
Create responsive layouts for different screen sizes
Build a responsive e-commerce page structure
Understand Bootstrap's mobile-first approach

What is Bootstrap?

                    Bootstrap is a free, open-source CSS framework for creating
                    responsive, mobile-first websites
                

Developed by Twitter (now Meta)
Provides pre-built CSS and JavaScript components
Uses a 12-column grid system
Includes responsive breakpoints for different devices
Cross-browser compatible

Bootstrap Benefits

Speed: Rapid development with pre-built components

Consistency: Uniform design across browsers

Responsive: Mobile-first responsive design

Customizable: Easy to customize and extend

Watch:Bootstrap Fundamentals Explained

See Moodle for supporting materials.

Bootstrap 5 Features

Bootstrap 5 Key Features:
✓ CSS Grid System (12 columns)
✓ Responsive Breakpoints
✓ Pre-built Components
✓ Utility Classes
✓ JavaScript Plugins
✓ Sass/SCSS Support
✓ No jQuery Dependency
✓ Improved Accessibility

Grid System: Flexible 12-column layout
Components: Buttons, forms, navigation, cards
Utilities: Spacing, colors, typography, flexbox
JavaScript: Interactive components and plugins

Including Bootstrap in Your Project

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,
initial-scale=1.0">
  <title>Bootstrap Page</title>
  <!-- Bootstrap CSS -->
  <link
href="../../libs/bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
  <!-- Your content here -->
  <!-- Bootstrap JS -->
  <script
src="../../libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

CDN Method: Quick setup using Bootstrap's CDN links

Bootstrap Grid System

Bootstrap Grid Classes:
.col-* (Extra small: <576px)
.col-sm-* (Small: ≥576px)
.col-md-* (Medium: ≥768px)
.col-lg-* (Large: ≥992px)
.col-xl-* (Extra large: ≥1200px)
.col-xxl-* (Extra extra large: ≥1400px)
* = number of columns (1-12)

12-column grid system
Mobile-first responsive design
Automatic stacking on smaller screens
Flexible column sizing

Basic Grid Example

<div class="container">
  <div class="row">
    <div class="col-md-6">Left Column</div>
    <div class="col-md-6">Right Column</div>
  </div>
</div>

.container: Responsive container with max-width
.row: Horizontal group of columns
.col-md-6: 6 columns on medium screens and up
Columns stack on smaller screens

Result: Two equal columns on desktop, stacked on mobile

Responsive Grid Layouts

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 col-lg-6">
      Main Content
    </div>
    <div class="col-12 col-md-4 col-lg-6">
      Sidebar
    </div>
  </div>
</div>

Responsive Behavior

Mobile: 12 columns (full width each)

Tablet: 8 + 4 columns

Desktop: 6 + 6 columns

Bootstrap Containers

Container Types:
<div class="container">...</div>
<!-- Responsive with max-width -->
<div class="container-fluid">...</div>
<!-- Full width, no max-width -->
<div class="container-sm">...</div>
<!-- Responsive at small breakpoint -->

.container: Responsive with max-width at each breakpoint
.container-fluid: Full width across all screen sizes
.container-{breakpoint}: Responsive at specific breakpoint

Bootstrap Components

Common Bootstrap Components:
Navigation & Navbar
Buttons & Button Groups
Cards & Card Groups
Forms & Form Controls
Alerts & Badges
Modals & Dropdowns
Carousel & Pagination
Tables & Lists

Pre-built, reusable components
Consistent styling and behavior
Accessible by default
Easy to customize

Bootstrap Buttons

Button Classes:
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

Multiple color variants
Different sizes: .btn-sm, .btn-lg
Outline variants: .btn-outline-*
Button groups and toolbars

Bootstrap Cards

<div class="card" style="width: 18rem;">
  <img src="product.jpg" class="card-img-top" alt="Product">
  <div class="card-body">
    <h5 class="card-title">Product Name</h5>
    <p class="card-text">Product
description...</p>
    <a href="#" class="btn btn-primary">Add to
Cart</a>
  </div>
</div>

Flexible content containers
Headers, footers, and content sections
Perfect for product displays
Card groups and decks available

Bootstrap Navigation

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand"
href="#">E-Commerce</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">
        <li class="nav-item"><a
class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a
class="nav-link" href="#">Products</a></li>
      </ul>
    </div>
  </div>
</nav>

Responsive navigation bar
Collapsible on mobile devices
Brand logo and navigation links
Multiple color schemes available

Bootstrap Forms

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email
address</label>
    <input type="email" class="form-control"
id="email">
  </div>
  <div class="mb-3">
    <label for="password"
class="form-label">Password</label>
    <input type="password" class="form-control"
id="password">
  </div>
  <button type="submit" class="btn
btn-primary">Submit</button>
</form>

Styled form controls
Form validation classes
Input groups and add-ons
Responsive form layouts

Bootstrap Utilities

Utility Classes:
Spacing: m-*, p-*, mt-*, mb-*, etc.
Colors: text-primary, bg-success, etc.
Typography: text-center, fw-bold, etc.
Flexbox: d-flex, justify-content-center, etc.
Display: d-none, d-block, d-md-flex, etc.
Borders: border, rounded, shadow, etc.
Position: position-relative, top-0, etc.

Quick styling without custom CSS
Responsive utilities available
Consistent spacing and sizing
Easy to combine and customize

E-commerce Layout Structure

E-commerce Page Structure:
<!-- Header/Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark
bg-dark">...</nav>
<!-- Main Content -->
<div class="container mt-4">
  <div class="row">
    <!-- Sidebar -->
    <div class="col-md-3">Filters</div>
    <!-- Products -->
    <div class="col-md-9">Product Grid</div>
  </div>
</div>
<!-- Footer -->
<footer class="bg-light mt-5">...</footer>

Responsive Design Best Practices

Mobile-First: Design for mobile first, then enhance for larger screens
Breakpoint Strategy: Use Bootstrap's predefined breakpoints
Content Priority: Most important content first on mobile
Touch-Friendly: Ensure buttons and links are large enough to tap
Performance: Optimize images and assets for mobile
Testing: Test on real devices, not just browser resizing

Remember: Mobile users expect fast, easy-to-use interfaces

Task 1: Bootstrap Grid Layout

Instructions:

Create a new HTML file with Bootstrap 5 included
Build a responsive e-commerce homepage layout with:

Navigation bar with brand and menu items
Hero section with a call-to-action button
Product grid (3 columns on desktop, 2 on tablet, 1 on mobile)
Footer with multiple columns

Use Bootstrap classes for responsive behavior
Add sample content and images
Test the layout on different screen sizes

Time: 45 minutes

This task will help you understand Bootstrap's grid system and responsive design

Break Time

15 Minutes

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

Next: Secondary slides and Task 2

Bootstrap Customization

Sass Variables: Customize colors, fonts, spacing
Custom CSS: Override Bootstrap styles
CSS Custom Properties: Use CSS variables for theming
Component Modifiers: Create custom component variants
Utility Classes: Extend with custom utilities

Custom CSS Example:
:root {
  --bs-primary: #ff6b6b;
  --bs-secondary: #ee5a24;
}
.btn-custom {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

Bootstrap Theme Customization

                    Bootswatch provides free themes for Bootstrap that you can
                    easily customize
                

Try It: Bootstrap Theme Switcher

Sample Card

This card demonstrates how Bootstrap components look with different themes.

Success! This alert shows theme colors.

Warning! Different themes have different color schemes.

75%

Bootswatch Themes:

Free Themes: 30+ professionally designed Bootstrap themes

Easy Integration: Just replace the Bootstrap CSS link

Customizable: Modify colors, fonts, and spacing

Responsive: All themes work on all devices

Click the theme buttons to see how Bootstrap components change with different themes!

Bootstrap JavaScript Components

JavaScript Components:
Modals & Dialogs
Dropdown Menus
Collapse & Accordion
Carousel & Slideshows
Tooltips & Popovers
Scrollspy & Affix
Toast Notifications
Offcanvas Sidebar

Interactive components
No jQuery required in Bootstrap 5
Data attributes for initialization
JavaScript API for customization

Bootstrap Accessibility Features

ARIA Attributes: Built-in accessibility support
Keyboard Navigation: All components keyboard accessible
Screen Reader Support: Proper semantic markup
Focus Management: Clear focus indicators
Color Contrast: WCAG compliant color combinations
Semantic HTML: Proper HTML structure

                    Accessibility First: Bootstrap components are accessible by
                    default
                

Bootstrap Performance Optimization

Custom Builds: Include only needed components
CSS Minification: Reduce file size
CDN Usage: Leverage browser caching
Critical CSS: Inline above-the-fold styles
Lazy Loading: Load components as needed
Tree Shaking: Remove unused CSS

Custom Build Process:
1. Install Bootstrap Sass
2. Import only needed components
3. Compile with custom variables
4. Minify for production

Common Bootstrap Patterns

E-commerce Patterns:
Product Cards:
<div class="card h-100">
  <img class="card-img-top">
  <div class="card-body d-flex flex-column">
    <h5 class="card-title"></h5>
    <p class="card-text flex-grow-1"></p>
    <button class="btn btn-primary mt-auto">Add to
Cart</button>
  </div>
</div>

Consistent card heights
Sticky buttons at bottom
Responsive image handling
Flexbox for layout control

Common Bootstrap Issues

Grid Not Working: Check container and row structure
Responsive Issues: Verify viewport meta tag
Component Styling: Check for CSS conflicts
JavaScript Errors: Ensure proper script loading
Custom Styles: Use higher specificity or !important
Performance: Remove unused components

                    Debugging Tip: Use browser developer tools to inspect Bootstrap
                    classes
                

Bootstrap Resources

Official Documentation: getbootstrap.com
Examples: Bootstrap examples and templates
Community: Bootstrap GitHub and forums
Tools: Bootstrap Icons, Themes, and Generators
Learning: Tutorials and courses
Inspiration: Bootstrap showcase websites

Useful Tools:
- Bootstrap Icons
- Bootstrap Themes
- Bootstrap Studio
- Bootstrap Build Tools

Task 2: E-commerce Product Page

Instructions:

Create a responsive e-commerce product listing page
Include the following components:

Responsive navigation with search functionality
Product filter sidebar (collapsible on mobile)
Product grid with cards (responsive columns)
Pagination component
Footer with multiple sections

Use Bootstrap components and utilities
Implement responsive breakpoints
Add hover effects and interactions
Test on multiple screen sizes

Time: 45 minutes

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

Session Summary

Bootstrap provides a powerful framework for responsive design
Grid system enables flexible, mobile-first layouts
Pre-built components speed up development
Utility classes offer quick styling solutions
Responsive design is essential for modern web applications
Bootstrap 5 is accessible and performant by default

Next Session:

Bootstrap Components & Customization - Advanced styling and component usage