Bootstrap 5 Basics 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
How would you display an element as block in Bootstrap 5?
Select your answer
Question 2/15
Which Bootstrap 5 class indicates text is bold?
Select your answer
Question 3/15
Which class in Bootstrap 5 makes a table responsive?
Select your answer
Question 4/15
Which class would you use to create a small, rounded badge in Bootstrap 5?
Select your answer
Question 5/15
What class would you use to hide an element on all screen sizes in Bootstrap 5?
Select your answer
Question 6/15
What class is used to create a Bootstrap 5 alert that signifies an important action?
Select your answer
Question 7/15
What Bootstrap 5 class allows a text to overflow with ellipsis (...) for truncation?
Select your answer
Question 8/15
Which class would you use to apply rounded corners to an element in Bootstrap 5?
Select your answer
Question 9/15
What is the correct HTML element to create a Bootstrap 5 modal?
Select your answer
Question 10/15
Which Bootstrap 5 component would you use to create a carousel?
Select your answer
Question 11/15
What is the default grid system in Bootstrap 5 based on?
Select your answer
Question 12/15
Which Bootstrap 5 utility class would you use to make text lowercase?
Select your answer
Question 13/15
What is the default breakpoint for the 'lg' class in Bootstrap 5?
Select your answer
Question 14/15
Which of the following is a Bootstrap 5 border utility class?
Select your answer
Question 15/15
Which utility class is used to add shadow to an element in Bootstrap 5?
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 would you display an element as block in Bootstrap 5?
Available answers
Using the .d-block class will set an element's display to block in Bootstrap 5.
Question 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap 5 class indicates text is bold?
Available answers
The .fw-bold class in Bootstrap 5 makes the text bold.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class in Bootstrap 5 makes a table responsive?
Available answers
The .table-responsive class in Bootstrap 5 is used to make tables responsive.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class would you use to create a small, rounded badge in Bootstrap 5?
Available answers
To create a small badge in Bootstrap 5, you can use classes related to badges such as .badge-sm.
Question 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What class would you use to hide an element on all screen sizes in Bootstrap 5?
Available answers
The .d-none class hides an element on all screen sizes in Bootstrap 5.
Question 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What class is used to create a Bootstrap 5 alert that signifies an important action?
Available answers
The .alert-danger class in Bootstrap 5 is used to create alerts for important or dangerous actions.
Question 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What Bootstrap 5 class allows a text to overflow with ellipsis (...) for truncation?
Available answers
The .text-truncate class is used in Bootstrap 5 to truncate text with an ellipsis.
Question 8/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class would you use to apply rounded corners to an element in Bootstrap 5?
Available answers
The .rounded class in Bootstrap 5 is used to apply rounded corners to elements.
Question 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the correct HTML element to create a Bootstrap 5 modal?
Available answers
In Bootstrap 5, a modal is created using a
element.
Question 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap 5 component would you use to create a carousel?
Available answers
The Carousel component is used to create carousels in Bootstrap 5.
Question 11/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the default grid system in Bootstrap 5 based on?
Available answers
Bootstrap 5 uses a responsive, mobile-first 12-column grid system.
Question 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap 5 utility class would you use to make text lowercase?
Available answers
The .text-lowercase utility class in Bootstrap 5 is used to make text appear in lowercase.
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the default breakpoint for the 'lg' class in Bootstrap 5?
Available answers
The 'lg' class in Bootstrap 5 is applied for screen sizes equal to or larger than 992 pixels.
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which of the following is a Bootstrap 5 border utility class?
Available answers
The .border class is a utility class in Bootstrap 5 used for adding border to elements.
Question 15/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which utility class is used to add shadow to an element in Bootstrap 5?
Available answers
The .shadow utility class in Bootstrap 5 adds a shadow to an element.
show = false, 4000);"
x-show="show && message" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-2" x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0 transform translate-y-2" @click.away="show = false"
@keydown.escape.window="show = false" role="alert" aria-live="assertive" aria-labelledby="flashMessageTitle"
aria-describedby="flashMessageDesc"
class="fixed top-0 right-0 mt-8 mr-8 bg-white rounded overflow-hidden shadow-2xl max-w-xl" x-cloak>