Bootstrap MCQs – Bootstrap Images & Icons

11.) Which Bootstrap class rounds only the top corners of an image?

A) .rounded-only-top
B) .rounded-sm
C) .top-rounded
D) .rounded-top

Answer: Option D

Explanation: The .rounded-top class applies border-radius only to the top corners of an image.

12.) How do you change the size of a Bootstrap icon?

A) Using width and height attributes
B) Applying .icon-lg class
C) Adding .icon-size class
D) Using .bootstrap-icon-size

Answer: Option A

Explanation: Bootstrap Icons are SVGs, so their size is adjusted using width and height attributes.

13.) What is the default font family for Bootstrap Icons?

A) Font Awesome
B) Material Icons
C) Bootstrap Icons
D) Google Icons

Answer: Option C

Explanation: Bootstrap Icons use their own font family called Bootstrap Icons.

14.) What class applies a border around an image?

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

Answer: Option A

Explanation: The .border class applies a thin border around images.

15.) How do you apply different icon colors in Bootstrap?

A) .icon-color
B) .text-{color} classes
C) .bi-{color}
D) .icon-text

Answer: Option B

Explanation: You can use .text-primary, .text-danger, etc., to change icon colors.

16.) Which class makes an image’s edges fully rounded?

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

Answer: Option B

Explanation: The .rounded-circle class applies a full border-radius (50%), making the image a perfect circle.

17.) How do you apply a grayscale filter to an image in Bootstrap?

A) .filter-grayscale
B) .img-grayscale
C) .grayscale
D) .filter: grayscale(100%)

Answer: Option D

Explanation: Bootstrap does not provide a built-in class for grayscale, but it can be applied using the CSS filter property.

18.) What class adds a thin border and rounded corners to an image?

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

Answer: Option A

Explanation: The .img-thumbnail class adds a light border and rounded corners, making the image look like a thumbnail.

19.) What is the default Bootstrap icon library in Bootstrap 5?

A) FontAwesome
B) Bootstrap Icons
C) Material Icons
D) Ionicons

Answer: Option B

Explanation: Bootstrap 5 includes Bootstrap Icons, which is its own official icon set, available via CDN or local installation.

Leave a Reply

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