Bootstrap 5 Components Quiz
Want to learn more than this quiz offers you? Have a look at my Frontend web
development courses.
Create an account and save your quiz results
Login and save your results
OR
Question 1/15
What is the purpose of the Bootstrap class 'd-flex'?
Select your answer
Question 2/15
What does the 'table-striped' class do in a Bootstrap table?
Select your answer
Question 3/15
Which class is used to create a fluid-width container that resizes with the viewport in Bootstrap?
Select your answer
Question 4/15
Which Bootstrap utility class is used for adding box shadows to elements?
Select your answer
Question 5/15
What component in Bootstrap would you use for providing hierarchical information to the user?
Select your answer
Question 6/15
What does the Bootstrap class 'btn-outline-secondary' do?
Select your answer
Question 7/15
Which component in Bootstrap is used to provide navigational links in a navbar?
Select your answer
Question 8/15
Which Bootstrap class is used to retain rounded corners on an element?
Select your answer
Question 9/15
What is the primary function of the Bootstrap 'modal' component?
Select your answer
Question 10/15
Which Bootstrap class would you use to style a navigation bar with a darker background?
Select your answer
Question 11/15
What is the default color class used for a primary button in Bootstrap?
Select your answer
Question 12/15
What Bootstrap class would you use to align text to the center of an element?
Select your answer
Question 13/15
Which Bootstrap component is used to cycle through items, such as images, using animations?
Select your answer
Question 14/15
Which class in Bootstrap will center a div horizontally within its parent?
Select your answer
Question 15/15
Which of the following is a core component of Bootstrap used for creating a grid layout?
Select your answer
Your Results
You did not answer any questions correctly.
Your Answers
Question 1/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the purpose of the Bootstrap class 'd-flex'?
Available answers
The 'd-flex' class applies a flexbox layout to an element, enabling flexible and responsive layouts using CSS Flexbox properties.
Question 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What does the 'table-striped' class do in a Bootstrap table?
Available answers
The 'table-striped' class in Bootstrap applies alternating background colors to rows, enhancing readability.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class is used to create a fluid-width container that resizes with the viewport in Bootstrap?
Available answers
The 'container-fluid' class in Bootstrap allows the container to take the full width of the viewport, resizing dynamically.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap utility class is used for adding box shadows to elements?
Available answers
The 'shadow' class is used to add a small box shadow to elements, with variations such as 'shadow-lg' and 'shadow-sm' for different shadow sizes.
Question 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What component in Bootstrap would you use for providing hierarchical information to the user?
Available answers
The 'Breadcrumb' component in Bootstrap provides a list of links to represent the current page's position in a navigational hierarchy.
Question 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What does the Bootstrap class 'btn-outline-secondary' do?
Available answers
The 'btn-outline-secondary' class creates a secondary button with an outline instead of a filled background color.
Question 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which component in Bootstrap is used to provide navigational links in a navbar?
Available answers
The 'Navbar-nav' component is used within the Navbar to create a list of navigational links in Bootstrap.
Question 8/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap class is used to retain rounded corners on an element?
Available answers
The 'rounded' class in Bootstrap applies border-radius styling to make the corners of an element rounded.
Question 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the primary function of the Bootstrap 'modal' component?
Available answers
The 'modal' component in Bootstrap is used to display dialog boxes or popups that overlay the current content, ideal for forms or alerts.
Question 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap class would you use to style a navigation bar with a darker background?
Available answers
The 'bg-dark' class is used to apply a dark background color to elements, including navigation bars.
Question 11/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the default color class used for a primary button in Bootstrap?
Available answers
The 'btn-primary' class applies the primary color styling to buttons in Bootstrap, aligning with the theme's primary color.
Question 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What Bootstrap class would you use to align text to the center of an element?
Available answers
The 'text-center' class in Bootstrap aligns text to the center of its containing element.
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap component is used to cycle through items, such as images, using animations?
Available answers
The 'Carousel' component in Bootstrap is used to create slideshows that cycle through content like images or text.
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class in Bootstrap will center a div horizontally within its parent?
Available answers
The 'mx-auto' class in Bootstrap applies horizontal margins set to 'auto', centering the element horizontally within its parent.
Question 15/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which of the following is a core component of Bootstrap used for creating a grid layout?
Available answers
The 'Container' component in Bootstrap is used to create a grid layout by holding rows and columns.