Bootstrap MCQs – Bootstrap JavaScript Components

11.) What attribute is used to enable Bootstrap tooltips?

A) data-bs-toggle=”popover”
B) data-bs-tooltip=”enable”
C) tooltip-enable
D) data-bs-toggle=”tooltip”

Answer: Option A

Explanation: This attribute is required to activate tooltips in Bootstrap.

12.) Which Bootstrap component provides a sliding image gallery?

A) Offcanvas
B) Carousel
C) Modal
D) Popover

Answer: Option B

Explanation: The Carousel component creates a sliding image gallery with multiple images.

13.) How do you initialize a Bootstrap modal using JavaScript?

A) new bootstrap.Modal(‘#myModal’)
B) initialize.Modal(‘#myModal’)
C) Modal.init(‘#myModal’)
D) activate.Modal(‘#myModal’)

Answer: Option A

Explanation: This initializes a modal component in Bootstrap 5.

14.) Which method manually hides a popover?

A) optidismissPopover()on1
B) popover.hide()
C) closePopover()
D) disablePopover()

Answer: Option B

Explanation: The .hide() method hides an active popover.

15.) What class is required for a modal to fade in with animation?

A) modal-animate
B) animated-modal
C) fade
D) bs-animation

Answer: Option C

Explanation: Adding the fade class to a modal enables smooth animations when opening and closing.

16.) Which Bootstrap component is used for lightweight notifications?

A) Toast
B) Alert
C) Popover
D) ScrollSpy

Answer: Option A

Explanation: Toasts are non-intrusive notifications that appear dynamically.

17.) How can you trigger a Bootstrap toast manually using JavaScript?

A) toast.activate()
B) bootstrap.Toast(‘#myToast’).show()
C) toast.start(‘#myToast’)
D) new bootstrap.Toast(‘#myToast’).show()

Answer: Option D

Explanation: This creates and displays a toast notification dynamically.

18.) Which JavaScript method is used to dispose of a Bootstrap component?

A) destroy()
B) dispose()
C) remove()
D) delete()

Answer: Option B

Explanation: The dispose() method removes a Bootstrap JavaScript component from memory.

19.) What component updates navigation links dynamically based on scroll position?

A) Dropdown
B) Modal
C) ScrollSpy
D) Offcanvas

Answer: Option C

Explanation: ScrollSpy automatically updates active nav links while scrolling.

20.) What attribute is used to activate ScrollSpy?

A) data-bs-scroll=”spy”
B) scroll-enable
C) activate-scrollspy
D) data-bs-spy=”scroll”

Answer: Option D

Explanation: This enables ScrollSpy functionality in Bootstrap.

Leave a Reply

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