Bootstrap 5 Components Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

What is the default color class used for a primary button in Bootstrap?

Select your answer

Question 2/15

In Bootstrap 5, which class is used to create a list item that is displayed inline?

Select your answer

Question 3/15

Which of the following Bootstrap utility classes can be used to add margin to the left of an element?

Select your answer

Question 4/15

What class in Bootstrap 5 is used to create a button group?

Select your answer

Question 5/15

Which Bootstrap class is used to retain rounded corners on an element?

Select your answer

Question 6/15

Which class in Bootstrap will center a div horizontally within its parent?

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

What is the primary function of the Bootstrap 'modal' component?

Select your answer

Question 9/15

Which is the correct Bootstrap class to add a badge to an element?

Select your answer

Question 10/15

What does the Bootstrap class 'btn-outline-secondary' do?

Select your answer

Question 11/15

Which of the following is a core component of Bootstrap used for creating a grid layout?

Select your answer

Question 12/15

Which component would you use to create a collapsible section in a Bootstrap webpage?

Select your answer

Question 13/15

How is a container traditionally centered inside the viewport in Bootstrap, taking full available height?

Select your answer

Question 14/15

Which Bootstrap component is used to cycle through items, such as images, using animations?

Select your answer

Question 15/15

Which Bootstrap component is used to display additional content when interacting with an element?

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 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 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Bootstrap 5, which class is used to create a list item that is displayed inline?

Available answers

The 'list-inline-item' class is used in Bootstrap to create a list item that is displayed inline within 'list-inline' lists.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of the following Bootstrap utility classes can be used to add margin to the left of an element?

Available answers

The 'me-3' class in Bootstrap adds a margin to the right of an element (matching the intention of left-margin in LTR languages; however, it should be 'ms' for strict left-margin).
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
What class in Bootstrap 5 is used to create a button group?

Available answers

The 'btn-group' class in Bootstrap is used to group a series of buttons together on a single line.
Question 5/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 6/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 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
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 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which is the correct Bootstrap class to add a badge to an element?

Available answers

The 'badge' class in Bootstrap adds small, prominent labels to an element, usually to indicate counters or status.
Question 10/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 11/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.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which component would you use to create a collapsible section in a Bootstrap webpage?

Available answers

The 'Accordion' component is used in Bootstrap to create collapsible sections, allowing users to expand and hide content.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
How is a container traditionally centered inside the viewport in Bootstrap, taking full available height?

Available answers

By using 'vh-100', 'd-flex', and 'align-items-center', a container in Bootstrap can fill the full available height and center content vertically within the viewport.
Question 14/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 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Bootstrap component is used to display additional content when interacting with an element?

Available answers

The 'Tooltip' component in Bootstrap is used to display additional information when a user hovers over or focuses on an element.