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
If you want to enable dark mode for components in Bootstrap 5, which Sass map would you modify?
Select your answer
Question 2/15
How can you disable the rounded corners provided by Bootstrap 5?
Select your answer
Question 3/15
To customize the global default font size for Bootstrap 5, which variable would you modify?
Select your answer
Question 4/15
How can you center a button horizontally in Bootstrap 5 without affecting its width?
Select your answer
Question 5/15
Which class name allows you to apply only vertical margins to an element in Bootstrap 5?
Select your answer
Question 6/15
Which class would you use to apply rounded corners to an image in Bootstrap 5?
Select your answer
Question 7/15
Which Sass variable would you modify to customize the default line-height in Bootstrap 5?
Select your answer
Question 8/15
What class would you use to change the text color to a custom color in Bootstrap 5?
Select your answer
Question 9/15
Which Bootstrap 5 class helps you create an invisible placeholder for an image when it's still loading?
Select your answer
Question 10/15
What is the correct way to customize Bootstrap 5’s grid gutter width using Sass?
Select your answer
Question 11/15
Which Bootstrap 5 class allows you to fix an element to the top of the viewport?
Select your answer
Question 12/15
Which Bootstrap 5 class would you use to center a text within its parent container?
Select your answer
Question 13/15
In Bootstrap 5, how can you create a responsive image that maintains its aspect ratio?
Select your answer
Question 14/15
Which class should be added to a div to hide it on medium to larger screens in Bootstrap 5?
Select your answer
Question 15/15
Which Bootstrap utility class would you override to adjust column gutters?
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
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 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How can you disable the rounded corners provided by Bootstrap 5?
Available answers
In Bootstrap 5, controlling rounded corners globally can be done by setting the Sass variable $enable-rounded to false, removing the rounded borders.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
To customize the global default font size for Bootstrap 5, which variable would you modify?
Available answers
The variable '$font-size-base' determines the global default font size across Bootstrap's CSS framework.
Question 4/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 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class name allows you to apply only vertical margins to an element in Bootstrap 5?
Available answers
In Bootstrap 5, 'my-2' applies vertical margin with spacing unit '2', affecting both top and bottom of an element.
Question 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which class would you use to apply rounded corners to an image in Bootstrap 5?
Available answers
The 'rounded' class is used in Bootstrap 5 to give any image rounded corners.
Question 7/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.
Question 8/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 9/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 10/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 11/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 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap 5 class would you use to center a text within its parent container?
Available answers
The 'text-center' class in Bootstrap 5 is used to align text to the center within its parent container.
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
In Bootstrap 5, how can you create a responsive image that maintains its aspect ratio?
Available answers
In Bootstrap 5, 'img-fluid' makes an image responsive, and using it with 'aspect-ratio' class retains the aspect ratio.
Question 14/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 15/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Bootstrap utility class would you override to adjust column gutters?
Available answers
Bootstrap 5 uses 'g-*' classes to control gutters, where '*' can be replaced with a number to control spacing between columns.