Bootstrap practice

Filter by difficulty, use hints, reveal solutions and save attempts locally.

1. Practice Bootstrap Introduction by building one step of a classic Bootstrap client dashboard and checking the result.

code-writing
beginnerBootstrap Introduction

1. Start from the Bootstrap Introduction lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

2. Practice Bootstrap Setup by building one step of a classic Bootstrap client dashboard and checking the result.

code-fix
beginnerBootstrap Setup

1. Start from the Bootstrap Setup lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

3. Practice Grid System Basics by building one step of a classic Bootstrap client dashboard and checking the result.

output
beginnerGrid System Basics

1. Start from the Grid System Basics lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

4. Practice Responsive Columns by building one step of a classic Bootstrap client dashboard and checking the result.

fill-blank
beginnerResponsive Columns

1. Start from the Responsive Columns lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

5. Practice Containers and Rows by building one step of a classic Bootstrap client dashboard and checking the result.

true-false
beginnerContainers and Rows

1. Start from the Containers and Rows lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

6. Practice Typography and Colors by building one step of a classic Bootstrap client dashboard and checking the result.

mini-project
beginnerTypography and Colors

1. Start from the Typography and Colors lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

7. Practice Buttons and Button Groups by building one step of a classic Bootstrap client dashboard and checking the result.

mcq
beginnerButtons and Button Groups

1. Start from the Buttons and Button Groups lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

8. Practice Forms and Form Controls by building one step of a classic Bootstrap client dashboard and checking the result.

code-writing
beginnerForms and Form Controls

1. Start from the Forms and Form Controls lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

9. Practice Input Groups by building one step of a classic Bootstrap client dashboard and checking the result.

code-fix
beginnerInput Groups

1. Start from the Input Groups lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

10. Practice Alerts and Badges by building one step of a classic Bootstrap client dashboard and checking the result.

output
beginnerAlerts and Badges

1. Start from the Alerts and Badges lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

11. Practice Cards Component by building one step of a classic Bootstrap client dashboard and checking the result.

fill-blank
intermediateCards Component

1. Start from the Cards Component lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

12. Practice List Groups by building one step of a classic Bootstrap client dashboard and checking the result.

true-false
intermediateList Groups

1. Start from the List Groups lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

13. Practice Navbars and Navs by building one step of a classic Bootstrap client dashboard and checking the result.

mini-project
intermediateNavbars and Navs

1. Start from the Navbars and Navs lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

14. Practice Dropdowns and Modals by building one step of a classic Bootstrap client dashboard and checking the result.

mcq
intermediateDropdowns and Modals

1. Start from the Dropdowns and Modals lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

15. Practice Tooltips and Popovers by building one step of a classic Bootstrap client dashboard and checking the result.

code-writing
intermediateTooltips and Popovers

1. Start from the Tooltips and Popovers lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

16. Practice Carousel Component by building one step of a classic Bootstrap client dashboard and checking the result.

code-fix
intermediateCarousel Component

1. Start from the Carousel Component lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

17. Practice Accordion and Collapse by building one step of a classic Bootstrap client dashboard and checking the result.

output
intermediateAccordion and Collapse

1. Start from the Accordion and Collapse lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

18. Practice Tables and Pagination by building one step of a classic Bootstrap client dashboard and checking the result.

fill-blank
intermediateTables and Pagination

1. Start from the Tables and Pagination lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

19. Practice Spacing Utilities by building one step of a classic Bootstrap client dashboard and checking the result.

true-false
intermediateSpacing Utilities

1. Start from the Spacing Utilities lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

20. Practice Display Utilities by building one step of a classic Bootstrap client dashboard and checking the result.

mini-project
intermediateDisplay Utilities

1. Start from the Display Utilities lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

21. Practice Flex Utilities by building one step of a classic Bootstrap client dashboard and checking the result.

mcq
advancedFlex Utilities

1. Start from the Flex Utilities lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

22. Practice Float and Align Utilities by building one step of a classic Bootstrap client dashboard and checking the result.

code-writing
advancedFloat and Align Utilities

1. Start from the Float and Align Utilities lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

23. Practice Borders and Shadows by building one step of a classic Bootstrap client dashboard and checking the result.

code-fix
advancedBorders and Shadows

1. Start from the Borders and Shadows lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

24. Practice Bootstrap with React by building one step of a classic Bootstrap client dashboard and checking the result.

output
advancedBootstrap with React

1. Start from the Bootstrap with React lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

25. Practice Customizing Theme by building one step of a classic Bootstrap client dashboard and checking the result.

fill-blank
advancedCustomizing Theme

1. Start from the Customizing Theme lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

26. Practice Bootstrap Icons by building one step of a classic Bootstrap client dashboard and checking the result.

true-false
advancedBootstrap Icons

1. Start from the Bootstrap Icons lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

27. Practice Sass Customization by building one step of a classic Bootstrap client dashboard and checking the result.

mini-project
advancedSass Customization

1. Start from the Sass Customization lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

28. Practice Accessibility in Bootstrap by building one step of a classic Bootstrap client dashboard and checking the result.

mcq
advancedAccessibility in Bootstrap

1. Start from the Accessibility in Bootstrap lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

29. Practice Best Practices by building one step of a classic Bootstrap client dashboard and checking the result.

code-writing
advancedBest Practices

1. Start from the Best Practices lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.

30. Practice Bootstrap Review by building one step of a classic Bootstrap client dashboard and checking the result.

code-fix
advancedBootstrap Review

1. Start from the Bootstrap Review lesson example.

2. Use active state, classes and responsive breakpoints instead of placeholder text.

3. Run the example and compare output before polishing.