Bootstrap 5 Utilities and Helpers Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

How do you visually hide but still read an element's contents with a screen reader in Bootstrap 5?

Select your answer

Question 2/15

Which class in Bootstrap 5 is used to add a shadow effect to an element?

Select your answer

Question 3/15

Which Bootstrap 5 utility class creates a vertically centered flexbox layout?

Select your answer

Question 4/15

How do you hide an element from all devices but keep it accessible for screen readers in Bootstrap 5?

Select your answer

Question 5/15

What is the purpose of the 'd-flex' class in Bootstrap 5?

Select your answer

Question 6/15

Which utility class will transform the text to uppercase in Bootstrap 5?

Select your answer

Question 7/15

Which utility class would you use in Bootstrap 5 to add a margin to all sides of an element?

Select your answer

Question 8/15

What does 'g-2' class achieve in Bootstrap 5?

Select your answer

Question 9/15

Which utility class in Bootstrap 5 would you use to make an element invisible but still present in the document?

Select your answer

Question 10/15

To set the opacity of an element to 75% in Bootstrap 5, which class would you use?

Select your answer

Question 11/15

To apply a shadow effect smaller than the default shadow in Bootstrap 5, which class would you use?

Select your answer

Question 12/15

Which class in Bootstrap 5 can be used to make an element's text italic?

Select your answer

Question 13/15

How does the 'bg-danger' class affect an element in Bootstrap 5?

Select your answer

Question 14/15

In Bootstrap 5, how is a responsive container class implemented?

Select your answer

Question 15/15

Which class do you use in Bootstrap 5 to position an element in the center of its parent?

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
How do you visually hide but still read an element's contents with a screen reader in Bootstrap 5?

Available answers

The 'visually-hidden' class hides the element from visual view while keeping it available for screen readers.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class in Bootstrap 5 is used to add a shadow effect to an element?

Available answers

The 'shadow' class adds a default box shadow to an element.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Bootstrap 5 utility class creates a vertically centered flexbox layout?

Available answers

The 'align-items-center' class vertically aligns flex items within a flex container.
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you hide an element from all devices but keep it accessible for screen readers in Bootstrap 5?

Available answers

The 'visually-hidden' class hides an element visually but keeps it accessible for screen readers.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the purpose of the 'd-flex' class in Bootstrap 5?

Available answers

The 'd-flex' class in Bootstrap 5 sets an element to display as a flex container.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which utility class will transform the text to uppercase in Bootstrap 5?

Available answers

The 'text-uppercase' class transforms text to uppercase in Bootstrap 5.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which utility class would you use in Bootstrap 5 to add a margin to all sides of an element?

Available answers

In Bootstrap 5, 'm-4' adds a margin of 1.5rem to all sides of an element.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
What does 'g-2' class achieve in Bootstrap 5?

Available answers

In Bootstrap 5, 'g-2' is a gap utility class that applies a 0.5rem gap between grid items.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which utility class in Bootstrap 5 would you use to make an element invisible but still present in the document?

Available answers

The 'invisible' class makes an element invisible, but it remains in the flow of the document.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
To set the opacity of an element to 75% in Bootstrap 5, which class would you use?

Available answers

The class 'opacity-75' is used to change the opacity of an element to 75%.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
To apply a shadow effect smaller than the default shadow in Bootstrap 5, which class would you use?

Available answers

The 'shadow-sm' class in Bootstrap 5 applies a smaller shadow than the default 'shadow' class.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class in Bootstrap 5 can be used to make an element's text italic?

Available answers

The 'fst-italic' class is used to apply italic styling to text in Bootstrap 5.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
How does the 'bg-danger' class affect an element in Bootstrap 5?

Available answers

The 'bg-danger' class applies a red background color to an element.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Bootstrap 5, how is a responsive container class implemented?

Available answers

The 'container-fluid' class creates a full-width container that adjusts with the viewport.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class do you use in Bootstrap 5 to position an element in the center of its parent?

Available answers

The 'mx-auto' class centers an element horizontally by automatically adjusting the margins.