Welcome to the Bootstrap 4 Quiz by The Coding College! This interactive quiz will test your knowledge of Bootstrap 4, helping you reinforce key concepts and ensure you are ready to use the framework effectively in real-world projects.
Why Take This Quiz?
This quiz will:
- Help you identify areas where you need to improve.
- Test your understanding of Bootstrap 4 components, classes, and utilities.
- Solidify your grasp of responsive design principles.
Instructions
- Read each question carefully and select the correct answer.
- Try to complete the quiz without looking up answers to challenge yourself!
- Review the detailed explanations provided at the end of the quiz.
Bootstrap 4 Quiz Questions
Question 1: What is the default grid system in Bootstrap 4 based on?
A) 6 columns
B) 12 columns
C) 16 columns
D) 24 columns
Question 2: Which class would you use to make a column span 6 columns on medium devices and 12 on small devices?
A) col-md-6 col-sm-12
B) col-6 col-md-12
C) col-sm-6 col-md-12
D) col-md-12 col-sm-6
Question 3: Which Bootstrap 4 class is used to make text bold?
A) font-weight-italic
B) text-bold
C) font-weight-bold
D) text-bold-weight
Question 4: What does the class btn-primary do?
A) Adds a blue background to a button.
B) Adds a red background to a button.
C) Makes the button larger.
D) Aligns the button to the center.
Question 5: How do you make a Bootstrap 4 navigation bar responsive?
A) Use the nav-responsive class.
B) Add the navbar-expand-* class.
C) Add the navbar-responsive class.
D) Use the nav-collapse class.
Question 6: What is the purpose of the data-toggle="collapse" attribute in Bootstrap 4?
A) To toggle between showing and hiding an element.
B) To create a carousel.
C) To open a modal.
D) To add a tooltip.
Question 7: Which class would you use to add a light grey background to a table?
A) table-grey
B) bg-light-grey
C) table-light
D) bg-table-grey
Question 8: How do you align an image to the center in Bootstrap 4?
A) Add the class text-center to the image.
B) Add the class center-block to the image.
C) Use the mx-auto d-block classes.
D) Use the img-center class.
Question 9: Which of the following classes is NOT part of Bootstrap 4’s spacing utilities?
A) m-3
B) px-4
C) py-5
D) g-6
Question 10: Which class in Bootstrap 4 is used to make a modal visible?
A) modal-show
B) show-modal
C) active-modal
D) show
Question 11: What is the purpose of the sr-only class in Bootstrap 4?
A) To style buttons for screen readers.
B) To hide elements visually but keep them accessible to screen readers.
C) To add screen-reader-only animations.
D) To make text bold on small screens.
Question 12: Which class would you use to display a spinner in Bootstrap 4?
A) spinner-loader
B) spinner-border
C) spinner-ring
D) spinner-circle
Question 13: What is the correct class to add a tooltip to an element?
A) data-tooltip
B) data-bs-tooltip
C) tooltip-class
D) data-toggle="tooltip"
Question 14: Which class makes an alert dismissible in Bootstrap 4?
A) alert-dismissible
B) alert-remove
C) alert-close
D) alert-hide
Question 15: What is the purpose of the sticky-top class in Bootstrap 4?
A) To fix the element at the bottom of the viewport.
B) To make the element scroll with the page.
C) To keep the element fixed at the top of the viewport while scrolling.
D) To make the element draggable.
Answer Key and Explanations
1. Answer: B) Bootstrap 4 uses a 12-column grid system to create responsive layouts.
2. Answer: A) The class col-md-6 col-sm-12 ensures 6-column width on medium devices and full width on smaller screens.
3. Answer: C) The font-weight-bold class makes text bold in Bootstrap 4.
4. Answer: A) The btn-primary class adds a blue background and white text to buttons by default.
5. Answer: B) The navbar-expand-* class makes a navigation bar responsive. Replace * with sm, md, or lg as needed.
6. Answer: A) The data-toggle="collapse" attribute toggles the visibility of an element, such as a collapsible navbar.
7. Answer: C) The table-light class applies a light grey background to tables.
8. Answer: C) The mx-auto d-block classes center an image horizontally and make it display as a block.
9. Answer: D) The g-6 class is not a spacing utility in Bootstrap 4; it is used in Bootstrap 5.
10. Answer: D) The show class makes a modal visible when added to the modal element.
11. Answer: B) The sr-only class hides content visually but keeps it accessible to screen readers.
12. Answer: B) The spinner-border class is used to display a spinner in Bootstrap 4.
13. Answer: D) The data-toggle="tooltip" attribute is used to add tooltips in Bootstrap 4.
14. Answer: A) The alert-dismissible class makes an alert dismissible, allowing it to be closed by the user.
15. Answer: C) The sticky-top class keeps an element fixed at the top of the viewport while scrolling.
Final Thoughts
How did you do? If you got most of the answers right, congratulations! If not, don’t worry—review the explanations and revisit our tutorials on The Coding College to master Bootstrap 4.