Advanced Bootstrap 5 Customization Quiz

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.