Bootstrap Learning Projects

A collection of Bootstrap projects and tutorials from the #100DaysOfCode challenge, demonstrating progressive learning from fundamentals to real-world application.

📚 Contents

1. 11.0 Bootstrap Intro

Introduction to Bootstrap framework basics. Covers fundamental concepts and setup.

• index.html - Bootstrap intro exercises
• solution.html - Reference solution
• Asset files for learning examples

2. 11.2 Bootstrap Components

Deep dive into Bootstrap components and their usage patterns.

• index.html - Component exploration exercises
• solution.html - Completed component examples
• style.css - Custom styling examples
• SVG icons and images for component demonstrations
• website-text.txt - Sample content for practice

3. 11.3 TinDog Project ⭐

A complete responsive landing page project for a dog dating app built with Bootstrap. This is the capstone project showcasing practical Bootstrap implementation.

Features:

• Responsive navbar and hero section
• Feature showcase with Bootstrap grid system
• Testimonials section
• Pricing cards
• Call-to-action footer
• Mobile-optimized design
• Uses Bootstrap 5.3.8 CDN

Key Components Used:

• Responsive containers and grid system
• Flexbox utilities
• Buttons and button groups
• Cards for pricing plans
• Carousel (optional)
• Typography utilities
• Spacing utilities

🚀 Quick Start

1. Navigate to any project folder
2. Open index.html in your browser
3. Compare with solution.html to see the expected result
4. For TinDog, visit /11.3 TinDog Project/index.html

📦 Technologies

• Bootstrap 5.3.8 - CSS framework
• HTML5 - Markup
• CSS3 - Styling
• SVG Icons - Scalable graphics

📖 Learning Path

1. Start with 11.0 Bootstrap Intro to understand basic concepts
2. Explore 11.2 Bootstrap Components to learn individual components
3. Build 11.3 TinDog Project to apply all concepts in a real project

🎨 Key Concepts Covered

• Grid system and responsive breakpoints
• Flexbox utilities
• Component styling (buttons, cards, forms, etc.)
• Responsive design patterns
• Mobile-first approach
• Bootstrap theming and customization

📝 Notes

• Each project includes both index.html (to complete) and solution.html (reference)
• Assets are organized in respective project folders
• Custom CSS is kept minimal to focus on Bootstrap's capabilities

🔗 Resources

• Bootstrap Documentation
• Bootstrap Components Reference
• Bootstrap Snippets & Examples

---

Part of the #100DaysOfCode learning journey focused on modern web development fundamentals.