Bootstrap MCQs – Bootstrap Images & Icons

Bootstrap provides built-in classes to style images and icons efficiently. Whether it’s responsive images, circular avatars, or using icon libraries, Bootstrap simplifies web design. The following Multiple-choice questions (MCQs) will help you prepare for interviews and boost your Bootstrap skills.

1.) What Bootstrap class makes an image responsive?

A) .img-fluid
B) .responsive-img
C) .img-responsive
D) .img-auto

Answer: Option A

Explanation: The .img-fluid class ensures images scale down when necessary and never exceed the parent container’s width.

2.) What is the default width of an image using .img-fluid?

A) 50%
B) 75%
C) 100%
D) 90%

Answer: Option C

Explanation: The .img-fluid class sets max-width: 100% and height: auto, making the image fully responsive.

3.) How do you create a circular image in Bootstrap?

A) .img-circle
B) .rounded-circle
C) .circle-img
D) .img-rounded

Answer: Option B

Explanation: The .rounded-circle class applies border-radius: 50%, making the image circular.

4.) What class adds rounded corners to an image?

A) .rounded
B) .img-rounded
C) .round-img
D) .border-radius

Answer: Option A

Explanation: The .rounded class softens image corners without making them circular.

5.) Which class is used to float an image to the right in Bootstrap?

A) .float-right
B) .float-end
C) .img-right
D) .image-float

Answer: Option B

Explanation: Bootstrap 5 replaced .float-right with .float-end for right alignment.

6.) What Bootstrap class is used to center an image?

A) .mx-auto
B) .img-center
C) .text-center
D) .image-align

Answer: Option A

Explanation: The .mx-auto class, when combined with d-block, centers an image horizontally.

7.) What class do you use to add a shadow to an image?

A) .shadow-img
B) option2
C) .box-shadow
D) .shadow

Answer: Option D

Explanation: The .shadow class applies a default shadow to images. You can also use .shadow-sm, .shadow-lg, etc.

8.) How do you make an image appear as a thumbnail?

A) .img-border
B) .thumbnail-img
C) .img-thumbnail
D) .border-img

Answer: Option C

Explanation: The .img-thumbnail class adds padding and a light border, making images appear like thumbnails.

9.) Which Bootstrap class ensures an image is aligned in the center?

A) .align-middle
B) .d-block mx-auto
C) .img-center
D) .centered-img

Answer: Option B

Explanation: Combining .d-block with .mx-auto ensures the image is centered horizontally.

10.) What Bootstrap class is used to add a background color to an SVG icon?

A) .bg-primary
B) .icon-bg
C) .fill-bg
D) .background-icon

Answer: Option A

Explanation: Bootstrap classes like .bg-primary add a background color to any element, including SVG icons.

Leave a Reply

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