Bootstrap MCQs – Bootstrap Components

Bootstrap provides a wide range of reusable UI components, such as alerts, buttons, modals, carousels, and tooltips, that help developers create responsive and interactive web applications quickly. Understanding these components is essential for interview preparation and real-world web development. The following Multiple-choice questions (MCQs) will test and enhance your knowledge of Bootstrap Components.

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

A) .btn
B) .button
C) .btn-style
D) .button-control

Answer: Option A

Explanation: The .btn class is used to style buttons in Bootstrap.

2.) What class is used to create a primary button in Bootstrap?

A) .btn-main
B) .button-primary
C) .btn-primary
D) .primary-btn

Answer: Option C

Explanation: .btn-primary applies the Bootstrap primary color to the button.

3.) How do you apply different colors to alerts in Bootstrap?

A) Use .alert-primary, .alert-success, .alert-danger, etc.
B) Use .color-alert classes
C) Use .bg-alert classes
D) Use .alert-color classes

Answer: Option A

Explanation: Bootstrap provides different alert classes for color customization.

4.) Which Bootstrap component is used to create a modal dialog box?

A) .message-box
B) .popup-box
C) .dialog-box
D) .modal-dialog

Answer: Option D

Explanation: Bootstrap uses .modal-dialog within a .modal container to create a modal popup.

5.) What is the correct way to dismiss a Bootstrap alert?

A) close=”alert”
B) data-dismiss=”alert”
C) dismiss=”true”
D) remove=”alert”

Answer: Option B

Explanation: data-dismiss=”alert” allows users to close alerts dynamically.

6.) Which Bootstrap class is used to create a badge?

A) .label
B) .badge
C) .tag
D) .status

Answer: Option B

Explanation: The .badge class is used to create notification indicators like counters or labels.

7.) What is the role of the .navbar-toggler class?

A) Toggles the navigation bar in mobile view
B) Changes the navbar color
C) Adds animations to navbar
D) Expands the navbar content

Answer: Option A

Explanation: .navbar-toggler activates a collapsible navbar on smaller screens.

8.) Which class is used to add a header inside a Bootstrap card?

A) .card-top
B) .card-title
C) .card-header
D) .card-head

Answer: Option C

Explanation: .card-header is used to define the heading section inside a card.

9.) How do you add a footer to a Bootstrap card?

A) .card-foot
B) .card-bottom
C) .footer-card
D) .card-footer

Answer: Option D

Explanation: The .card-footer class defines a footer inside a Bootstrap card.

10.) What Bootstrap class is used to create a carousel slider?

A) .carousel
B) .slider
C) .carousel-slider
D) .image-slider

Answer: Option A

Explanation: The .carousel class in Bootstrap is used to create an image slider.

Pages: 1 2 3

Leave a Reply

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