Bootstrap MCQs – Bootstrap JavaScript Components

Bootstrap’s JavaScript components help create interactive and responsive UIs. Understanding modals, tooltips, popovers, carousels, dropdowns, and alerts is essential for web development.

With these MCQs, you will be covered the key Bootstrap JavaScript components used for modals, tooltips, carousels, popovers, accordions, dropdowns, offcanvas menus, and more. Understanding these will boost your interview preparation and make you more confident in Bootstrap development.

1.) What is required for Bootstrap JavaScript components to work?

A) jQuery only
B) Bootstrap JS & Popper.js
C) Only Bootstrap JS
D) React.js

Answer: Option B

Explanation: Bootstrap relies on Popper.js for tooltips, popovers, and dropdowns.

2.) Which Bootstrap component automatically dismisses content when clicked outside?

A) Modal
B) Tooltip
C) Alert
D) Button

Answer: Option A

Explanation: Bootstrap modals close when clicked outside unless backdrop: ‘static’ is set.

3.) Which class triggers a modal when clicking a button?

A) .modal-trigger
B) data-modal=”show”
C) .open-modal
D) data-bs-toggle=”modal”

Answer: Option D

Explanation: The data-bs-toggle=”modal” attribute activates a Bootstrap modal.

4.) What is the default position of a tooltip?

A) Top
B) Left
C) Right
D) Bottom

Answer: Option A

Explanation: By default, tooltips appear above the element unless specified otherwise.

5.) How do you enable tooltips in Bootstrap 5?

A) $(‘[data-bs-toggle=”tooltip”]’).tooltip()
B) new bootstrap.Tooltip()
C) enableTooltip()
D) tooltip.init()

Answer: Option B

Explanation: Bootstrap 5 no longer uses jQuery, so tooltips require new bootstrap.Tooltip().

6.) Which component allows auto-sliding images?

A) Tooltip
B) Modal
C) Carousel
D) Accordion

Answer: Option C

Explanation: The carousel component rotates images with auto-slide functionality.

7.) What does data-bs-slide=”next” do?

A) Slides next in a carousel
B) Moves to next tab
C) Opens next modal
D) Shows next tooltip

Answer: Option A

Explanation: This attribute moves the carousel to the next slide.

8.) How do you initialize a popover?

A) activatePopover()
B) $(‘[data-bs-toggle=”popover”]’).popover()
C) popover.show()
D) new bootstrap.Popover()

Answer: Option D

Explanation: Bootstrap 5 requires JavaScript initialization for popovers.

9.) Which Bootstrap component collapses sections dynamically?

A) Accordion
B) Tooltip
C) Modal
D) Alert

Answer: Option A

Explanation: The accordion component collapses and expands content dynamically.

10.) Which Bootstrap component allows the creation of collapsible sections?

A) Carousel
B) ScrollSpy
C) Accordion
D) Tooltip

Answer: Option C

Explanation: The Accordion component allows the creation of collapsible sections using Bootstrap.

Leave a Reply

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