Demo Mode

Activity 14 of 14

Activity 14: Bootstrap Progress Bar

Practice and reinforce the concepts from Lesson 14

Bootstrap Progress Bar with Cards

What you'll learn

How to create Bootstrap card components with different content types
How to implement progress bars with various styles and animations
How to integrate progress bars within card layouts
How to build responsive card grids using Bootstrap's grid system
How to customize cards for professional visual design

Total Activity Time: 45-60 minutes

:computer: Getting Started

Time: 5 minutes

Download your material

Open StackBlitz and access the template: Bootstrap Progress Bar
Alternative option: Download the source code template from StackBlitz using the Download Project button if you prefer using your own IDE

:warning: Important: File Management DO NOT DELETE any existing files in the template:

Package files

Any other configuration files you didn't create

ONLY EDIT the HTML, CSS, and JavaScript files as needed for your project.

In this hands-on activity, you'll create visually appealing card layouts combined with progress bars to display content and data effectively. Cards are one of Bootstrap's most versatile components, perfect for organizing content in a clean, modular way.

:computer: Activity Steps

Step One: Set Up Your Project Environment

Time: 5 minutes

Access the project using the StackBlitz link provided above
Click the "Fork" button at the top left to create your own editable copy
Ensure the preview window (right side) is visible for live updates
Verify Bootstrap CSS and JS are linked in the <head> section of index.html

tip Pro Tip Keep the preview window open alongside your code to see changes instantly. This helps catch styling issues quickly!

Step 2: Review Challenge Requirements

Time: 5 minutes

Study the Bootstrap card component structure in the documentation
Review progress bar implementation options
Understand how to organize content within cards
Note the responsive layout requirements for your project

Step 3: Create Basic Bootstrap Cards

Time: 10 minutes

Start with a simple card structure:

html

<div class="card">
  <div class="card-header">Header (optional)</div>
  <div class="card-body">Main content area</div>
  <div class="card-footer">Footer (optional)</div>
</div>

Create at least 3 different card examples
Add proper Bootstrap classes for styling

tip Common Issue If your cards aren't displaying properly, check that you've closed all <div> tags correctly!

Step 4: Add Various Content Types to Cards

Time: 10 minutes

Add text content using .card-title and .card-text
Insert images with .card-img-top or .card-img-bottom
Include buttons using Bootstrap's .btn classes
Create a card with a list group (.list-group)
Experiment with mixing different content types

Step 5: Implement Progress Bars

Time: 10 minutes

Create a basic progress bar:

html

<div class="progress">
  <div class="progress-bar" style="width: 25%"></div>
</div>

Add different colored progress bars using:
- .bg-success (green)
- .bg-warning (yellow)
- .bg-danger (red)
- .bg-info (blue)
Create an animated progress bar with .progress-bar-animated

tip Animation Tip Add both .progress-bar-striped and .progress-bar-animated classes for a moving striped effect!

Step 6: Integrate Progress Bars with Cards

Time: 5 minutes

Add progress bars inside card bodies to show metrics
Place progress bars in card footers for status indicators
Create at least 2 cards with integrated progress bars
Ensure visual consistency between components

Step 7: Create Responsive Card Layouts

Time: 10 minutes

Use Bootstrap's grid system to arrange cards:

html

<div class="row">
  <div class="col-md-4">
    <div class="card h-100">...</div>
  </div>
</div>

Apply .h-100 class for equal height cards
Test different column sizes (col-sm-, col-md-, col-lg-*)
Add proper spacing with margin and padding utilities

Step 8: Customize and Style Cards

Time: 5 minutes

Apply different card backgrounds (.bg-light, .bg-dark, etc.)
Add shadows with .shadow or .shadow-sm
Experiment with border utilities (.border-primary, .border-0)
Ensure professional visual hierarchy

Step 9: Test and Refine

Time: 5 minutes

Resize your browser window to test responsiveness
Verify all progress bars display correctly
Check that cards maintain proper alignment
Review your code for Bootstrap best practices

:white_check_mark: Required Elements Checklist

Your Bootstrap Cards project must include:

At least 4 Bootstrap card components with proper structure
Various content types within cards (text, images, buttons, lists)
Minimum 3 progress bars with different completion levels
Responsive card layout using Bootstrap grid system
Different progress bar colors and styles (at least 3 variations)
Professional visual design with consistent styling
Clean, well-organized HTML using proper Bootstrap classes
Equal height cards using .h-100 where appropriate
Proper spacing with Bootstrap utility classes
Working responsive behavior across all screen sizes

:hammer_and_wrench: Troubleshooting Common Issues

Cards Not Aligning Properly

Ensure all cards in a row have the .h-100 class
Check that your grid columns add up to 12
Verify you're using the correct breakpoint classes

Progress Bars Not Showing

Make sure the progress bar has a width style attribute
Check that you've nested .progress-bar inside .progress
Verify you haven't forgotten the percentage sign in the width value

Responsive Issues

Test at multiple screen sizes using browser dev tools
Remember that col-md-* only applies to medium screens and up
Use col-12 as a fallback for mobile devices

tip Need Help? If you're stuck, try these resources:

Review the Bootstrap documentation for cards and progress bars
Check your browser's console for any errors
Compare your code structure with the examples provided

:emoji: Project Submission

:information_source: Important: Submission Instructions When you have completed your Bootstrap Cards project:

Test your project thoroughly across different screen sizes
Ensure all required elements are included
Save your StackBlitz project (it auto-saves, but double-check!)
Copy your StackBlitz project URL
Submit using the form below

Submit Your Project Here

:warning: Before You Submit Double-check that:

All cards display correctly on mobile, tablet, and desktop

Progress bars show appropriate completion levels

Your layout is responsive and professional-looking

You've included all required elements from the checklist

Activity 14 of 14

Activity 14: Bootstrap Progress Bar

Practice and reinforce the concepts from Lesson 14

Bootstrap Progress Bar with Cards

What you'll learn

How to create Bootstrap card components with different content types
How to implement progress bars with various styles and animations
How to integrate progress bars within card layouts
How to build responsive card grids using Bootstrap's grid system
How to customize cards for professional visual design

Total Activity Time: 45-60 minutes

:computer: Getting Started

Time: 5 minutes

Download your material

Open StackBlitz and access the template: Bootstrap Progress Bar
Alternative option: Download the source code template from StackBlitz using the Download Project button if you prefer using your own IDE

:warning: Important: File Management DO NOT DELETE any existing files in the template:

Package files

Any other configuration files you didn't create

ONLY EDIT the HTML, CSS, and JavaScript files as needed for your project.

Activity Overview

In this hands-on activity, you'll create visually appealing card layouts combined with progress bars to display content and data effectively. Cards are one of Bootstrap's most versatile components, perfect for organizing content in a clean, modular way.

:computer: Activity Steps

Step One: Set Up Your Project Environment

Time: 5 minutes

Access the project using the StackBlitz link provided above
Click the "Fork" button at the top left to create your own editable copy
Ensure the preview window (right side) is visible for live updates
Verify Bootstrap CSS and JS are linked in the <head> section of index.html

tip Pro Tip Keep the preview window open alongside your code to see changes instantly. This helps catch styling issues quickly!

Step 2: Review Challenge Requirements

Time: 5 minutes

Study the Bootstrap card component structure in the documentation
Review progress bar implementation options
Understand how to organize content within cards
Note the responsive layout requirements for your project

Step 3: Create Basic Bootstrap Cards

Time: 10 minutes

Start with a simple card structure:

html

<div class="card">
  <div class="card-header">Header (optional)</div>
  <div class="card-body">Main content area</div>
  <div class="card-footer">Footer (optional)</div>
</div>

Create at least 3 different card examples
Add proper Bootstrap classes for styling

tip Common Issue If your cards aren't displaying properly, check that you've closed all <div> tags correctly!

Step 4: Add Various Content Types to Cards

Time: 10 minutes

Add text content using .card-title and .card-text
Insert images with .card-img-top or .card-img-bottom
Include buttons using Bootstrap's .btn classes
Create a card with a list group (.list-group)
Experiment with mixing different content types

Step 5: Implement Progress Bars

Time: 10 minutes

Create a basic progress bar:

html

<div class="progress">
  <div class="progress-bar" style="width: 25%"></div>
</div>

Add different colored progress bars using:
- .bg-success (green)
- .bg-warning (yellow)
- .bg-danger (red)
- .bg-info (blue)
Create an animated progress bar with .progress-bar-animated

tip Animation Tip Add both .progress-bar-striped and .progress-bar-animated classes for a moving striped effect!

Step 6: Integrate Progress Bars with Cards

Time: 5 minutes

Add progress bars inside card bodies to show metrics
Place progress bars in card footers for status indicators
Create at least 2 cards with integrated progress bars
Ensure visual consistency between components

Step 7: Create Responsive Card Layouts

Time: 10 minutes

Use Bootstrap's grid system to arrange cards:

html

<div class="row">
  <div class="col-md-4">
    <div class="card h-100">...</div>
  </div>
</div>

Apply .h-100 class for equal height cards
Test different column sizes (col-sm-, col-md-, col-lg-*)
Add proper spacing with margin and padding utilities

Step 8: Customize and Style Cards

Time: 5 minutes

Apply different card backgrounds (.bg-light, .bg-dark, etc.)
Add shadows with .shadow or .shadow-sm
Experiment with border utilities (.border-primary, .border-0)
Ensure professional visual hierarchy

Step 9: Test and Refine

Time: 5 minutes

Resize your browser window to test responsiveness
Verify all progress bars display correctly
Check that cards maintain proper alignment
Review your code for Bootstrap best practices

:white_check_mark: Required Elements Checklist

Your Bootstrap Cards project must include:

At least 4 Bootstrap card components with proper structure
Various content types within cards (text, images, buttons, lists)
Minimum 3 progress bars with different completion levels
Responsive card layout using Bootstrap grid system
Different progress bar colors and styles (at least 3 variations)
Professional visual design with consistent styling
Clean, well-organized HTML using proper Bootstrap classes
Equal height cards using .h-100 where appropriate
Proper spacing with Bootstrap utility classes
Working responsive behavior across all screen sizes

:hammer_and_wrench: Troubleshooting Common Issues

Cards Not Aligning Properly

Ensure all cards in a row have the .h-100 class
Check that your grid columns add up to 12
Verify you're using the correct breakpoint classes

Progress Bars Not Showing

Make sure the progress bar has a width style attribute
Check that you've nested .progress-bar inside .progress
Verify you haven't forgotten the percentage sign in the width value

Responsive Issues

Test at multiple screen sizes using browser dev tools
Remember that col-md-* only applies to medium screens and up
Use col-12 as a fallback for mobile devices

tip Need Help? If you're stuck, try these resources:

Review the Bootstrap documentation for cards and progress bars
Check your browser's console for any errors
Compare your code structure with the examples provided

:emoji: Project Submission

:information_source: Important: Submission Instructions When you have completed your Bootstrap Cards project:

Test your project thoroughly across different screen sizes
Ensure all required elements are included
Save your StackBlitz project (it auto-saves, but double-check!)
Copy your StackBlitz project URL
Submit using the form below

Submit Your Project Here

:warning: Before You Submit Double-check that:

All cards display correctly on mobile, tablet, and desktop

Progress bars show appropriate completion levels

Your layout is responsive and professional-looking

You've included all required elements from the checklist