Advanced Bootstrap 5 Customization Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

Which class should be added to a div to hide it on medium to larger screens in Bootstrap 5?

Select your answer

Question 2/15

Which Sass variable would you modify to customize the default line-height in 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 ensure a table is responsive in Bootstrap 5 across all viewports?

Select your answer

Question 5/15

If you want to enable dark mode for components in Bootstrap 5, which Sass map would you modify?

Select your answer

Question 6/15

Which Sass map would you alter to change the color palette used by Bootstrap 5 components?

Select your answer

Question 7/15

Which Bootstrap 5 class allows you to fix an element to the top of the viewport?

Select your answer

Question 8/15

To remove the default border radius globally from Bootstrap 5, which variables should be set to false or to 0px?

Select your answer

Question 9/15

How can you center a button horizontally in Bootstrap 5 without affecting its width?

Select your answer

Question 10/15

How can you disable the rounded corners provided by Bootstrap 5?

Select your answer

Question 11/15

What is necessary to import before customizing Bootstrap with Sass?

Select your answer

Question 12/15

Which class would you use to apply rounded corners to an image in Bootstrap 5?

Select your answer

Question 13/15

Which file should you edit to change Bootstrap 5's breakpoints used for the responsive grid?

Select your answer

Question 14/15

Which Bootstrap utility class would you override to adjust column gutters?

Select your answer

Question 15/15

Which class would you apply to make a button full-width 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 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 2/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 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 ensure a table is responsive in Bootstrap 5 across all viewports?

Available answers

To make a table responsive across all viewports in Bootstrap 5, wrap the table in a div with the 'overflow-auto' class.
Question 5/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 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Sass map would you alter to change the color palette used by Bootstrap 5 components?

Available answers

$theme-colors is the Sass map that defines the color palette used by various Bootstrap components and utilities.
Question 7/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 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
To remove the default border radius globally from Bootstrap 5, which variables should be set to false or to 0px?

Available answers

Set both $enable-rounded to false and individual $border-radius variables to 0 to disable rounded corners globally.
Question 9/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 10/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 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is necessary to import before customizing Bootstrap with Sass?

Available answers

To effectively customize Bootstrap's style using Sass, you should first import Bootstrap's functions and variables.
Question 12/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 13/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 14/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.
Question 15/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.