Bootstrap 5 Sass Customization Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

Changing which variable will update the margin sizes applied to the grid system?

Select your answer

Question 2/15

Altering which variable adjusts the height of line-height globally?

Select your answer

Question 3/15

Which Bootstrap 5 Sass function helps check if a map contains a certain key?

Select your answer

Question 4/15

To implement a custom fluid container, which variable can be modified?

Select your answer

Question 5/15

When extending Bootstrap 5’s utility classes, which mixin is often used to add new utilities?

Select your answer

Question 6/15

If you wish to globally affect all headings, which variable should you target?

Select your answer

Question 7/15

Which Sass mixin is utilized to align text and containers to the vertical center?

Select your answer

Question 8/15

How do you disable all outlines for focused elements in Bootstrap 5 using Sass?

Select your answer

Question 9/15

Which Bootstrap 5 variable influences the border width across all components?

Select your answer

Question 10/15

What does modifying the $input-btn-focus-box-shadow variable change?

Select your answer

Question 11/15

Which variable would you adjust to globally change the font family in Bootstrap 5?

Select your answer

Question 12/15

Which Sass variable would you modify to change the primary color theme in Bootstrap 5?

Select your answer

Question 13/15

You wish to create a custom button variant; which function is essential?

Select your answer

Question 14/15

To add custom colors in Bootstrap 5, which Sass map should be updated?

Select your answer

Question 15/15

Adjusting which variable will change the z-index across components?

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
Changing which variable will update the margin sizes applied to the grid system?

Available answers

The $grid-gutter-width affects the margins and spacing within the grid system, controlling the overall layout structure.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
Altering which variable adjusts the height of line-height globally?

Available answers

$line-height-base is the variable used to define and adjust the default line-height for typography in Bootstrap 5.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Bootstrap 5 Sass function helps check if a map contains a certain key?

Available answers

The function map-contains() is used in Bootstrap 5 to determine if a specific key exists within a Sass map.
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
To implement a custom fluid container, which variable can be modified?

Available answers

$container-fluid-breakpoints is used to define the behavior and breakpoints for fluid containers in Bootstrap 5.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
When extending Bootstrap 5’s utility classes, which mixin is often used to add new utilities?

Available answers

The @include utility mixin is used in Bootstrap 5 to create custom utility classes.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
If you wish to globally affect all headings, which variable should you target?

Available answers

Modifying $headings-font-family globally affects the font used for all heading elements in Bootstrap 5.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Sass mixin is utilized to align text and containers to the vertical center?

Available answers

@include align-items-center is used to vertically center-align flex items in Bootstrap.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you disable all outlines for focused elements in Bootstrap 5 using Sass?

Available answers

By setting $enable-outlines to false, you prevent outlines from appearing around focused elements.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Bootstrap 5 variable influences the border width across all components?

Available answers

The $border-width-base variable sets the border width used across different Bootstrap 5 components globally.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
What does modifying the $input-btn-focus-box-shadow variable change?

Available answers

Adjusting $input-btn-focus-box-shadow changes the box shadow effect when inputs and buttons gain focus.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which variable would you adjust to globally change the font family in Bootstrap 5?

Available answers

$font-family-base is the variable used to set the default font family throughout a Bootstrap 5-based site.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Sass variable would you modify to change the primary color theme in Bootstrap 5?

Available answers

In Bootstrap 5, the Sass variable $primary is used to set the primary color theme.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
You wish to create a custom button variant; which function is essential?

Available answers

The button-variant() function allows the creation of new button variants by defining color schemes in Bootstrap 5.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
To add custom colors in Bootstrap 5, which Sass map should be updated?

Available answers

In Bootstrap 5, the $colors map is used to include and customize new theme colors.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
Adjusting which variable will change the z-index across components?

Available answers

$z-index-map holds the z-index values for various Bootstrap 5 components, providing precise layer control.