Bootstrap 5

1. Introduction to Bootstrap 5

• What is Bootstrap
• Why use Bootstrap
• Bootstrap 5 vs Bootstrap 4
• CDN vs local installation
• Course project overview

2. Bootstrap Setup

• Adding Bootstrap via CDN
• Downloading Bootstrap files
• Using Bootstrap Icons
• Folder structure for a real project
• Testing Bootstrap in HTML

3. Bootstrap Grid System

• Containers: .container, .container-fluid
• Rows and columns
• 12-column grid concept
• Responsive breakpoints
• Column sizing
• Nested grids
• Practical layout exercises

4. Responsive Design

• Mobile-first concept
• Breakpoints in Bootstrap 5
• Responsive classes
• Hiding and showing elements
• Responsive spacing
• Responsive images

5. Typography

• Headings and display classes
• Paragraphs and lead text
• Text alignment
• Font weight and style
• Text colors
• Lists and blockquotes

6. Colors, Backgrounds, and Utilities

• Theme colors
• Background classes
• Border utilities
• Shadow utilities
• Rounded corners
• Width and height utilities
• Overflow utilities

7. Spacing System

• Margin classes
• Padding classes
• Horizontal and vertical spacing
• Gap utilities
• Practical spacing patterns

8. Flexbox Utilities

• Display flex
• Direction
• Justify content
• Align items
• Flex wrap
• Order utilities
• Real layout examples

9. Buttons and Button Groups

• Button styles
• Button sizes
• Outline buttons
• Disabled buttons
• Button groups
• Practical CTA sections

10. Navbar

• Basic navbar
• Responsive navbar
• Dropdown menu
• Brand logo
• Navbar toggler
• Sticky and fixed navbar
• Building a professional header

11. Cards

• Basic cards
• Card images
• Card groups
• Card layouts
• Pricing cards
• Blog cards
• Product cards

12. Forms

• Input fields
• Select menus
• Checkboxes and radio buttons
• Floating labels
• Validation styles
• Form layouts
• Login and contact forms

13. Tables

• Basic tables
• Striped tables
• Hover tables
• Responsive tables
• Table colors
• Dashboard table design

14. Alerts, Badges, and Progress

• Alerts
• Dismissible alerts
• Badges
• Progress bars
• Spinners
• Practical UI feedback

15. Modals

• Basic modal
• Modal sizes
• Modal forms
• Login popup
• Confirmation modal
• Using data attributes

16. Carousel

• Basic carousel
• Carousel with captions
• Controls and indicators
• Hero slider design
• Image optimization tips

17. Accordion and Collapse

• Accordion component
• Collapse areas
• FAQ section
• Sidebar menu
• Mobile content toggle

18. Dropdowns, Tooltips, and Popovers

• Dropdown menus
• Split buttons
• Tooltips
• Popovers
• Bootstrap JavaScript basics

19. Offcanvas and Sidebar Layouts

• Offcanvas menu
• Mobile navigation
• Dashboard sidebar
• Filters panel
• Responsive admin layout

20. Bootstrap Icons

• Installing icons
• Using SVG/icons
• Social icons
• Feature icons
• Buttons with icons

21. Customizing Bootstrap

• Overriding Bootstrap CSS
• Custom colors
• Custom buttons
• Custom spacing
• Using CSS variables
• Introduction to Sass customization

22. Building Real Sections

• Hero section
• Services section
• About section
• Testimonials
• Pricing section
• Contact section
• Footer

23. Full Website Project

Planning layout
Creating homepage
Creating inner page
Responsive testing
Fixing spacing and alignment
Final review

24. Best Practices

• Clean HTML structure
• Reusable components
• Accessibility basics
• Performance tips
• Common Bootstrap mistakes
• When not to use Bootstrap

Final Project

• Students build a complete responsive website using Bootstrap 5, including:
  • Homepage
  • Navbar
  • Hero section
  • Cards
  • Forms
  • Modal
  • Responsive grid
  • Footer
  • Mobile-friendly design