Bootstrap MCQs – Bootstrap Components

11.) What is the Bootstrap class for a progress bar?

A) .progress-bar
B) .progress
C) .loading-bar
D) .bar-progress

Answer: Option B

Explanation: The .progress class creates a progress bar, and .progress-bar defines its styling.

12.) Which class is used to create a Bootstrap button group?

A) .button-cluster
B) .btn-set
C) .group-buttons
D) .btn-group

Answer: Option D

Explanation: The .btn-group class groups buttons together in a horizontal row.

13.) What class is used for tooltips in Bootstrap?

A) .hover-tip
B) .info-tip
C) .tooltip
D) .tip-box

Answer: Option C

Explanation: The .tooltip class in Bootstrap adds small hover-triggered text popups.

14.) How do you make a Bootstrap modal fullscreen?

A) Use .modal-fullscreen
B) Use .modal-lg
C) Use .modal-xl
D) Use .modal-expand

Answer: Option A

Explanation: The .modal-fullscreen class makes the modal cover the entire viewport.

15.) What is the correct way to activate a Bootstrap tooltip?

A) data-toggle=”tooltip”
B) tooltip-enable=”true”
C) data-hover=”tooltip”
D) show-tooltip=”on”

Answer: Option A

Explanation: The data-toggle=”tooltip” attribute enables Bootstrap tooltips.

16.) How do you make an accordion using Bootstrap?

A) .collapsible
B) .accordion
C) .panel-group
D) .toggle-list

Answer: Option B

Explanation: The .accordion class structures collapsible panels inside a group.

17.) Which class is used to create a spinner/loading animation?

A) .progress-spinner
B) .loader
C) .loading-circle
D) .spinner-border

Answer: Option D

Explanation: .spinner-border creates a circular spinner in Bootstrap.

18.) How do you add a Bootstrap tooltip manually with JavaScript?

A) new bootstrap.Tooltip(element)
B) activateTooltip(element)
C) element.enableTooltip()
D) tooltip.init(element)

Answer: Option A

Explanation: The new bootstrap.Tooltip(element) method initializes tooltips manually using JavaScript.

19.) How do you create a Bootstrap popover?

A) Use .popover-active
B) Use popover-enable=”true”
C) Use data-bs-toggle=”popover”
D) Use data-show=”popover”

Answer: Option C

Explanation: This attribute enables Bootstrap popovers when applied to elements.

20.) How can you make a Bootstrap toast notification auto-dismiss?

A) Use .toast-hide
B) Use dismiss=”true”
C) Use .toast-auto
D) Use data-bs-autohide=”true”

Answer: Option D

Explanation: The data-bs-autohide=”true” attribute makes toasts close automatically.

Leave a Reply

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