Bootstrap 5 Quiz

Are you learning Bootstrap 5 and want to see how much you’ve mastered? Quizzes are a great way to test your understanding and identify areas for improvement.

This Bootstrap 5 Quiz is designed for learners of all levels—from beginners to advanced developers. It covers core topics like the grid system, components, utilities, and responsive design principles. At the end of the quiz, you’ll find answers and explanations to help you learn from your mistakes.

Explore more coding resources and quizzes at The Coding College.

Quiz Instructions

  • Each question has four options.
  • Choose the best answer for each question.
  • Check your answers at the end of the quiz.

Bootstrap 5 Quiz Questions

Question 1: What is Bootstrap 5 primarily used for?

  1. Back-end Development
  2. Creating responsive front-end designs
  3. Writing server-side logic
  4. Managing databases

Question 2: What is the default breakpoint for col-sm-* in Bootstrap 5?

  1. 576px
  2. 768px
  3. 992px
  4. 1200px

Question 3: Which utility class is used to make text bold in Bootstrap 5?

  1. text-italic
  2. font-weight-bold
  3. text-bold
  4. fw-bold

Question 4: How do you include Bootstrap 5 in your project?

  1. Download and manually link files
  2. Use a CDN link
  3. Install via npm
  4. All of the above

Question 5: What does the class d-flex do in Bootstrap 5?

  1. Centers the content horizontally
  2. Applies a flexbox layout to an element
  3. Hides the element
  4. Adds padding to the element

Question 6: Which component is used to create a sliding image gallery in Bootstrap 5?

  1. Modal
  2. Alert
  3. Carousel
  4. Jumbotron

Question 7: What does the bg-primary class do?

  1. Sets the text color to primary
  2. Adds a primary background color to the element
  3. Adds a gradient background
  4. Adds a border

Question 8: Which class is used to make a button look like a link?

  1. btn-link
  2. btn-outline-link
  3. link-btn
  4. text-link

Question 9: What does the row class in Bootstrap 5 do?

  1. Adds horizontal padding to columns
  2. Creates a flexbox container for columns
  3. Aligns text to the left
  4. Hides an element

Question 10: How do you create a responsive grid in Bootstrap 5?

  1. Use col- classes only
  2. Use container and row classes with col-* classes
  3. Use grid-system class
  4. Use container-fluid only

Question 11: Which utility class hides an element on extra-small screens in Bootstrap 5?

  1. d-none
  2. d-xs-none
  3. d-sm-none
  4. d-md-none

Question 12: How can you add a tooltip to an element in Bootstrap 5?

  1. Use the data-tooltip attribute
  2. Add data-bs-toggle="tooltip" and title attributes
  3. Include tooltip in the class attribute
  4. Use data-toggle-tooltip attribute

Question 13: What is the difference between container and container-fluid?

  1. container is fixed-width, container-fluid is full-width
  2. container adds padding, container-fluid removes padding
  3. container is for small devices, container-fluid is for large devices
  4. Both are identical

Question 14: Which of the following is a valid color utility in Bootstrap 5?

  1. text-color-red
  2. text-warning
  3. bg-dark-red
  4. bg-grey

Question 15: How do you enable a dropdown in Bootstrap 5?

  1. Use data-bs-dropdown
  2. Add data-bs-toggle="dropdown"
  3. Use the dropdown-enable class
  4. Dropdowns are enabled by default

Answers and Explanations

  1. Answer: 2
    Bootstrap 5 is primarily used for creating responsive front-end designs.
  2. Answer: 1
    The col-sm-* breakpoint applies to devices with a width of 576px or more.
  3. Answer: 4
    The class fw-bold is used to make text bold in Bootstrap 5.
  4. Answer: 4
    Bootstrap 5 can be included via manual download, CDN, or npm.
  5. Answer: 2
    The d-flex class applies a flexbox layout to an element.
  6. Answer: 3
    Bootstrap’s Carousel component is used to create sliding image galleries.
  7. Answer: 2
    The bg-primary class applies the primary background color to an element.
  8. Answer: 1
    The btn-link class makes a button look like a link.
  9. Answer: 2
    The row class creates a flexbox container for columns.
  10. Answer: 2
    Use container, row, and col-* classes to create a responsive grid.
  11. Answer: 1
    The d-none class hides an element on all screen sizes.
  12. Answer: 2
    Tooltips are added with data-bs-toggle="tooltip" and title attributes.
  13. Answer: 1
    The container class provides a fixed-width layout, while container-fluid is full-width.
  14. Answer: 2
    The text-warning class is a valid text color utility in Bootstrap 5.
  15. Answer: 2
    Use data-bs-toggle="dropdown" to enable a dropdown in Bootstrap 5.

Conclusion

Taking this quiz helps you evaluate your knowledge of Bootstrap 5 and spot areas where you can improve. Quizzes like these are an excellent supplement to tutorials and exercises, making your learning more engaging and effective.

Leave a Comment