Bootstrap 5 Utilities and Helpers 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
To set the opacity of an element to 75% in Bootstrap 5, which class would you use?
Select your answer
Question 2/15
In Bootstrap 5, what does the 'overflow-auto' utility class do?
Select your answer
Question 3/15
If you want to indicate a top border only in Bootstrap 5, which class should you use?
Select your answer
Question 4/15
Which Bootstrap 5 utility class creates a vertically centered flexbox layout?
Select your answer
Question 5/15
How do you visually hide but still read an element's contents with a screen reader in Bootstrap 5?
Select your answer
Question 6/15
What utility class would you use to set an element to display as none in Bootstrap 5?
Select your answer
Question 7/15
In Bootstrap 5, how is a responsive container class implemented?
Select your answer
Question 8/15
Which utility class would you use in Bootstrap 5 to add a margin to all sides of an element?
Select your answer
Question 9/15
What does the 'w-50' class in Bootstrap 5 do?
Select your answer
Question 10/15
Which class would you use to quickly add a rounded border to an element in Bootstrap 5?
Select your answer
Question 11/15
Which class in Bootstrap 5 can be used to make an element's text italic?
Select your answer
Question 12/15
To make the first letter of a paragraph larger and bold in Bootstrap 5, which class can you use?
Select your answer
Question 13/15
How would you make an element center itself horizontally in Bootstrap 5 using flex utilities?
Select your answer
Question 14/15
Which Bootstrap 5 class makes an element a block level item?
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
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 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
In Bootstrap 5, what does the 'overflow-auto' utility class do?
Available answers
'overflow-auto' allows a scrollbar to appear only when the content overflows the element bounds.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If you want to indicate a top border only in Bootstrap 5, which class should you use?
Available answers
The 'border-top' class applies a border to only the top edge of an element.
Question 4/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 5/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 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What utility class would you use to set an element to display as none in Bootstrap 5?
Available answers
The 'd-none' class applies a display of 'none', hiding the element from the page visibly and from the DOM order.
Question 7/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 8/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 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What does the 'w-50' class in Bootstrap 5 do?
Available answers
The 'w-50' class sets the width of an element to 50% of its parent.
Question 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class would you use to quickly add a rounded border to an element in Bootstrap 5?
Available answers
The 'rounded' class adds a border-radius to make the element appear rounded.
Question 11/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 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
To make the first letter of a paragraph larger and bold in Bootstrap 5, which class can you use?
Available answers
The 'initialism' class makes the first letter of text larger and bold, similar to an initial cap.
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How would you make an element center itself horizontally in Bootstrap 5 using flex utilities?
Available answers
'justify-content-center' should be used to center an item horizontally in a flex container.
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap 5 class makes an element a block level item?
Available answers
The 'd-block' class is used in Bootstrap to set the display of an element to block.
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.