Advanced Bootstrap 5 Customization 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
Which Bootstrap class is used to create a custom aspect ratio for a div?
Select your answer
Question 2/15
What is the class for applying only the top border to an element in Bootstrap 5?
Select your answer
Question 3/15
Which class would you apply to make a button full-width in Bootstrap 5?
Select your answer
Question 4/15
If you want to enable dark mode for components in Bootstrap 5, which Sass map would you modify?
Select your answer
Question 5/15
What is the correct way to customize Bootstrap 5’s grid gutter width using Sass?
Select your answer
Question 6/15
Which class should be added to a div to hide it on medium to larger screens in Bootstrap 5?
Select your answer
Question 7/15
Which file should you edit to change Bootstrap 5's breakpoints used for the responsive grid?
Select your answer
Question 8/15
Which Bootstrap 5 class helps you create an invisible placeholder for an image when it's still loading?
Select your answer
Question 9/15
What class would you use to change the text color to a custom color in Bootstrap 5?
Select your answer
Question 10/15
How can you customize the default card padding in Bootstrap 5 with Sass?
Select your answer
Question 11/15
How do you create a custom button variant in Bootstrap 5?
Select your answer
Question 12/15
If you want to customize the spacing utility classes in Bootstrap 5, which Sass variable would you modify?
Select your answer
Question 13/15
Which Bootstrap 5 class allows you to fix an element to the top of the viewport?
Select your answer
Question 14/15
How can you center a button horizontally in Bootstrap 5 without affecting its width?
Select your answer
Question 15/15
Which Sass variable would you modify to customize the default line-height 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
Which Bootstrap class is used to create a custom aspect ratio for a div?
Available answers
Bootstrap 5 provides a custom ratio class feature where you can use 'ratio-:' to set a specific aspect ratio.
Question 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the class for applying only the top border to an element in Bootstrap 5?
Available answers
The 'border-top' class applies a border specifically to the top side of an element in Bootstrap 5.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class would you apply to make a button full-width in Bootstrap 5?
Available answers
The class 'w-100' is used in Bootstrap 5 to make any element, including a button, take up the full width of its container.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If you want to enable dark mode for components in Bootstrap 5, which Sass map would you modify?
Available answers
To enable and customize the dark mode in Bootstrap 5, you can modify the '$dark-mode-colors' Sass map.
Question 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the correct way to customize Bootstrap 5’s grid gutter width using Sass?
Available answers
The $grid-gutter-width Sass variable is responsible for controlling the grid column spaces, also known as gutters, in Bootstrap 5.
Question 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class should be added to a div to hide it on medium to larger screens in Bootstrap 5?
Available answers
The class 'd-md-none' hides the element on medium (md) devices and larger, making it display only on small screens or smaller.
Question 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which file should you edit to change Bootstrap 5's breakpoints used for the responsive grid?
Available answers
To change Bootstrap 5's breakpoints, you need to redefine them in a custom file like 'custom.scss' or '_custom.scss' by modifying the Bootstrap variables.
Question 8/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap 5 class helps you create an invisible placeholder for an image when it's still loading?
Available answers
The 'bg-light' class can create a light background placeholder while waiting for images to load.
Question 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What class would you use to change the text color to a custom color in Bootstrap 5?
Available answers
In Bootstrap 5, you can use the class 'text-' to apply a custom color defined in your CSS for text.
Question 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How can you customize the default card padding in Bootstrap 5 with Sass?
Available answers
To change the card padding in Bootstrap 5, adjust the '$card-spacer-y' variable in Sass.
Question 11/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you create a custom button variant in Bootstrap 5?
Available answers
To create a custom button variant, you need to add a mixin 'button-variant' in your Sass setup with your custom CSS class.
Question 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If you want to customize the spacing utility classes in Bootstrap 5, which Sass variable would you modify?
Available answers
Sass variable '$spacing' holds the default spacings used in Bootstrap 5, and modifying it will alter the spacing utility classes globally.
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap 5 class allows you to fix an element to the top of the viewport?
Available answers
The 'fixed-top' class fixes an element like a navbar to the top of the viewport, making it stationary during scroll in Bootstrap 5.
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How can you center a button horizontally in Bootstrap 5 without affecting its width?
Available answers
The 'mx-auto' class centers elements horizontally by automatically adjusting the left and right margins in Bootstrap 5.
Question 15/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Sass variable would you modify to customize the default line-height in Bootstrap 5?
Available answers
The '$line-height-base' variable in Sass controls the default line height, commonly used in Bootstrap 5 text and content elements.