Activity 09: Introduction to Bootstrap - Discovery Challenge

🎯 Learning Objectives

• Set up Bootstrap via CDN links
• Use Bootstrap pre-built components (buttons, alerts, cards, badges, progress bars, modals)
• Apply Bootstrap utility classes for spacing and styling
• Understand Bootstrap's responsive design principles
• Build professional-looking UIs quickly

🚀 Getting Started (See Results in 30 Seconds!)

# Just open index.html in your browser
open index.html
# OR double-click index.html in your file explorer

No installation or setup needed! Bootstrap loads from CDN, so the template works immediately in any modern web browser.

🎯 What's Already Working

• ✅ Bootstrap 4.6.2 CSS and JS CDN links loaded
• ✅ Jumbotron hero section with gradient background
• ✅ 6 different button styles (primary, success, danger, warning, info, outline)
• ✅ 3 alert components (success, info, warning)
• ✅ 3 card components with different styles
• ✅ Responsive grid layout (3 cards per row on desktop)
• ✅ Bootstrap utility classes (spacing, colors, text alignment)
• ⚠️ TODO: Add badge components
• ⚠️ TODO: Add progress bars
• ⚠️ TODO: Create a modal popup

📋 Tasks to Complete

TODO 1: Add Badge Components (Easy)

Location: index.html - After the Cards section

Success Criteria:

• Create a new <div class="section"> container
• Add section heading <h2 class="mb-3">Bootstrap Badges</h2>
• Add at least 5 badges with different colors
• Combine text with badges (e.g., "Inbox" with a count badge)

Hints:

• Look at how other sections are structured in the HTML (heading + description + content)
• Badge syntax: <span class="badge badge-COLOR">text</span>
• Badges work great inside headings (h5, h6) to show counts
• Available colors: badge-primary, badge-success, badge-danger, badge-warning, badge-info, badge-secondary
• Try creating labels like "Inbox 12", "Notifications 5", "Errors 3" with the numbers as badges

Expected Result: A section with headings showing colorful badges with numbers/labels

TODO 2: Add Progress Bar Component (Medium)

Location: index.html - After the Badges section

Success Criteria:

• Create a new section with heading "Bootstrap Progress Bars"
• Add 4 progress bars with different percentages (25%, 50%, 75%, 100%)
• Use different colors for each bar
• Add labels inside or above the progress bars
• Add descriptive text explaining what each bar represents

Hints:

• Progress bars use a container-child structure: outer progress div contains inner progress-bar div
• Set the width using inline style: style="width: 25%"
• Color the bar using Bootstrap background utilities: bg-success, bg-info, bg-warning, bg-danger
• Put the percentage text inside the progress-bar div to show a label
• Use mb-3 class for spacing between bars
• Try giving each bar a descriptive label above it (e.g., "Project Setup", "Testing Phase")

Advanced (Optional):

• Add progress-bar-striped class for striped appearance
• Add progress-bar-animated for animated stripes (requires striped class)

Expected Result: 4 progress bars with different colors and completion percentages

TODO 3: Add Modal Component (Hard)

Location: index.html - After Progress Bars section (button) AND before scripts (modal structure)

Success Criteria:

• Create a section with a button that triggers the modal
• Modal should have three parts: header, body, and footer
• Header contains a title and close (x) button
• Body contains your content (text, form, etc.)
• Footer contains action buttons ("Close" and "Save changes")
• Modal should fade in/out smoothly

Hints:

• A modal has TWO parts: (1) trigger button in the page content, (2) modal structure at the end of body
• The button needs data-toggle="modal" and data-target="#yourModalId"
• The modal needs matching id="yourModalId" and class="modal fade"
• Modal structure is nested: modal -> modal-dialog -> modal-content -> (header/body/footer)
• Use data-dismiss="modal" on close buttons to make them work
• The close x button uses the HTML entity ×
• Look at the TODO comment in the HTML file for the essential structure outline
• Bootstrap JS is already loaded (required for modals to work)

Important Attributes:

• data-toggle="modal" - Tells Bootstrap this button opens a modal
• data-target="#id" - Links button to modal by ID (must match!)
• data-dismiss="modal" - Closes modal when clicked
• fade class - Adds smooth fade animation

Modal Sizes (Optional):

• Add modal-sm, modal-lg, or modal-xl to the modal-dialog div

Expected Result: Clicking button opens a modal with smooth fade animation, header, content, and footer buttons

🚀 Extension Challenges

Beginner:

• Add a navbar component at the top with logo and navigation links
• Create a footer with social media icons
• Add button sizes (btn-sm, btn-lg) to existing buttons
• Try dismissible alerts (add close button)

Intermediate:

• Create a carousel/slideshow component
• Add a collapsible accordion section
• Build a pricing table with 3 tiers
• Add tooltips to buttons (data-toggle="tooltip")

Advanced:

• Create a complete dashboard layout using Bootstrap grid
• Add a dropdown menu in the navbar
• Build a contact form with validation styling
• Implement a tabbed content section

🐛 Troubleshooting

Bootstrap styles not showing?

• Problem: Page looks like plain HTML
• Solution: Check Bootstrap CSS CDN link in <head> (line 8)
• Tip: Open browser DevTools Network tab to see if CDN loaded

Modal not opening?

• Problem: Clicking button does nothing
• Solution: Check Bootstrap JS and jQuery are loaded before </body> (lines 199-200)
• Tip: Open browser Console (F12) to check for JavaScript errors

Modal ID mismatch?

• Problem: Wrong modal opens or nothing happens
• Solution: Ensure data-target="#exampleModal" matches id="exampleModal"
• Tip: IDs must match exactly (case-sensitive)

Progress bar not showing?

• Problem: Empty progress bar or no bar visible
• Solution: Check style="width: XX%" is set on progress-bar div
• Tip: Width must be between 0% and 100%

Badges not colorful?

• Problem: Badges showing as plain text
• Solution: Check both classes are present: badge badge-primary
• Tip: Need both badge and a color class

Responsive layout broken?

• Problem: Cards not stacking on mobile
• Solution: Check col-md-4 class is present on card columns
• Tip: md breakpoint means 3 columns on medium+ screens, stacks on small

📚 Learning Resources

• Bootstrap 4.6 Documentation - https://getbootstrap.com/docs/4.6/
• Bootstrap Components - https://getbootstrap.com/docs/4.6/components/
• Bootstrap Utilities - https://getbootstrap.com/docs/4.6/utilities/
• Bootstrap Grid System - https://getbootstrap.com/docs/4.6/layout/grid/
• W3Schools Bootstrap 4 - https://www.w3schools.com/bootstrap4/

🎓 Key Concepts Explained

Bootstrap CDN Setup

<!-- CSS in <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<!-- JS before </body> -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap Utility Classes

<!-- Spacing -->
<div class="mt-3">margin-top: 1rem</div>
<div class="p-4">padding: 1.5rem (all sides)</div>
<div class="mb-5">margin-bottom: 3rem</div>

<!-- Text -->
<p class="text-center">Centered text</p>
<p class="text-muted">Gray text</p>
<h1 class="display-4">Large display heading</h1>

<!-- Colors -->
<div class="bg-primary">Blue background</div>
<p class="text-danger">Red text</p>
<button class="btn btn-success">Green button</button>

Component vs Utility Classes

• Components: Pre-built UI elements (card, navbar, modal)
• Utilities: Single-purpose classes (mt-3, text-center, bg-primary)

🎯 Completion Checklist

Before submitting:

• All 3 TODOs completed
• Badges section added with 5+ badges
• Progress bars section with 4 bars
• Modal component working correctly
• All components styled with Bootstrap
• Modal opens and closes smoothly
• Responsive on mobile (test with DevTools)
• Code is properly indented
• All Bootstrap CDN links present

⏱️ Estimated Time

Total: 35-45 minutes

• TODO 1 (Badges - Easy): 5-10 minutes
• TODO 2 (Progress Bars - Medium): 10-15 minutes
• TODO 3 (Modal - Hard): 15-20 minutes
• Extension Challenges: 30-45 minutes (optional)

🚀 Next Steps

After completing this activity:

1. Explore: Try other Bootstrap components (carousel, accordion, tabs)
2. Customize: Override Bootstrap styles with your own CSS
3. Build: Create a complete landing page using Bootstrap
4. Learn: Study Bootstrap's grid system in Activity 10

Activity 09: Introduction to Bootstrap W1: Front-end Design & User Experience Telebort Engineering Time: 35-45 minutes