Bootstrap MCQs – Bootstrap Customization

11.) Which Bootstrap utility allows color customization for components?

A) $theme-variable
B) $colors-primary
C) $color-picker
D) $theme-colors

Answer: Option D

Explanation: $theme-colors is a SASS map that defines Bootstrap’s default color themes.

12.) How do you add a new color to Bootstrap’s theme colors?

A) Modify _variables.scss
B) Edit Bootstrap’s CSS file
C) Add a new CSS class
D) Use JavaScript to add a color

Answer: Option A

Explanation: You can extend $theme-colors by adding custom colors inside _variables.scss.

13.) What does the $enable-rounded variable control?

A) Enables card borders
B) optiEnables rounded buttons onlyon2
C) Enables rounded corners for all elements
D) Enables flexbox in Bootstrap

Answer: Option C

Explanation: $enable-rounded controls rounded corners globally.

14.) What variable controls the default font size in Bootstrap?

A) $font-size-base
B) $text-size
C) $default-font
D) $primary-font-size

Answer: Option A

Explanation: The $font-size-base variable defines the default font size in Bootstrap.

15.) How do you disable the default Bootstrap shadows?

A) $shadow-none: true;
B) $box-shadow: none;
C) $disable-shadows: true;
D) $enable-shadows: false;

Answer: Option D

Explanation: Setting $enable-shadows: false; globally removes box shadows from Bootstrap components.

16.) How do you change the default container width in Bootstrap?

A) Use JavaScript to adjust width
B) Use container-fluid
C) Set max-width in CSS
D) Modify $container-max-widths

Answer: Option D

Explanation: The $container-max-widths variable controls Bootstrap’s container sizes.

17.) How do you globally enable dark mode in Bootstrap?

A) $enable-dark-mode: true;
B) op.dark-mode {}ion2
C) @use dark-theme;
D) data-theme=”dark”

Answer: Option A

Explanation: Bootstrap 5 allows global dark mode using $enable-dark-mode.

18.) Which variable sets the default color for Bootstrap’s navbar in light mode?

A) $navbar-bg-color
B) $navbar-light-color
C) $navbar-default
D) $navbar-theme

Answer: Option B

Explanation: In Bootstrap, $navbar-light-color controls the default text color for the navbar in light mode, while $navbar-dark-color is used for dark mode.

19.) What is the default background color for Bootstrap’s primary button?

A) $btn-color
B) $btn-bg-primary
C) $btn-primary-bg
D) $btn-theme-primary

Answer: Option C

Explanation: The $btn-primary-bg variable sets the background color for .btn-primary. You can override this in _variables.scss to customize button colors.

20.) How do you enable the Bootstrap grid system to use Flexbox?

A) $enable-grid-flexbox: true;
B) $enable-flex: true;
C) $use-flexbox: true;
D) $grid-flex-enable: true;

Answer: Option B

Explanation: By default, Bootstrap 5 uses Flexbox for its grid system. However, in earlier versions, $enable-flex: true; was required to switch from float-based layouts to Flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *