Bootstrap Topicwise Exercises
Hands-on tasks to practice Bootstrap components and utilities topic by topic
1. Grid System Exercises
Exercise Set
- Create a 3-column layout on desktop and single-column on mobile.
- Use
col-md-6+col-lg-4responsive combinations. - Build a section with uneven columns (8 + 4).
- Practice spacing with
g-3andg-4gutters.
Hint: Use
container, row, and breakpoint-based col-* classes.
2. Utilities Exercises
Exercise Set
- Use spacing utilities to create consistent card padding and section margins.
- Build a flex toolbar with aligned left and right groups.
- Apply text, background, border, and shadow utility classes.
- Create responsive visibility behavior using
d-noneandd-md-block.
Hint: Solve layout needs with utility classes before writing custom CSS.
3. Forms Exercises
Exercise Set
- Design a login form with input groups and icons.
- Create a registration form using grid + validation classes.
- Add floating labels to at least 3 fields.
- Use switches, checkboxes, and radio groups with proper labels.
Hint: Use
needs-validation, invalid-feedback, and semantic labels.
4. Components Exercises
Exercise Set
- Build a card-based pricing section (3 pricing cards).
- Create an alerts panel with success, warning, and danger alerts.
- Add a modal form for “Contact Support”.
- Implement progress bars showing profile completion percentages.
Hint: Combine cards, buttons, alerts, modals, and progress components in one page.
6. Accessibility & QA Exercises
Exercise Set
- Ensure all form controls have associated labels.
- Add ARIA labels/descriptions where needed for icon-only controls.
- Test keyboard navigation for menus, modal, and tabs.
- Check contrast and adjust theme utilities for readability.
Hint: Validate with keyboard-only navigation and browser accessibility inspection tools.