Bootstrap MCQs – Bootstrap Flexbox & Utilities

Bootstrap Flexbox & Utilities provide a powerful way to manage layouts and responsiveness efficiently. Flexbox helps in aligning, ordering, and distributing elements inside containers, while utilities provide ready-to-use classes for spacing, sizing, coloring, and positioning.

These MCQs cover key concepts that will help in mastering Flexbox and Bootstrap utilities, ensuring you’re well-prepared for technical interviews and real-world projects.

1.) Which class enables the use of Flexbox in Bootstrap?

A) .d-flex
B) .flex-container
C) .display-flex
D) .enable-flexbox

Answer: Option A

Explanation: The .d-flex class in Bootstrap activates Flexbox on an element, making it a flex container.

2.) What does .flex-row do in Bootstrap?

A) Arranges items in a column
B) Aligns items at the center
C) Arranges items in a row (default)
D) Justifies content to the right

Answer: Option C

Explanation: The .flex-row class arranges child elements in a row, which is Flexbox’s default behavior.

3.) How do you reverse the order of flex items in Bootstrap?

A) .flex-reverse
B) .flex-row-reverse
C) .reverse-flex
D) .order-reverse

Answer: Option B

Explanation: The .flex-row-reverse class reverses the order of items in a row in a Flexbox container.

4.) Which class is used to align items vertically in the center?

A) .align-center
B) .align-items-middle
C) .align-items-center
D) .justify-center

Answer: Option C

Explanation: The .align-items-center class centers items vertically inside a Flexbox container.

5.) What does .d-none do in Bootstrap?

A) Applies display flex to an element
B) Makes an element visible
C) Increases the font size
D) Hides an element completely

Answer: Option D

Explanation: The .d-none class hides an element by setting display: none;.

6.) What does .order-1 do?

A) Orders an item to appear first
B) Moves an item to the last position
C) Aligns the item in the middle
D) Makes an item hidden

Answer: Option A

Explanation: The .order-1 class assigns the lowest priority in Flexbox, making the element appear first.

7.) Which class is used to make an item take up all available space in a Flexbox container?

A) .expand-flex
B) .w-100
C) .flex-full
D) .flex-grow-1

Answer: Option D

Explanation: The .flex-grow-1 class makes an item expand to fill available space inside a Flex container.

8.) How do you align content at the end of a Flexbox container?

A) .justify-content-start
B) .justify-content-center
C) .justify-content-end
D) .justify-flex-end

Answer: Option C

Explanation: The .justify-content-end class pushes items to the end of a Flexbox container.

9.) Which utility class applies equal margin on all sides?

A) .m-auto
B) .margin-equal
C) .margin-all
D) .m-equal

Answer: Option A

Explanation: The .m-auto class automatically applies equal margin on all sides.

10.) How do you add a responsive margin to the top of an element in Bootstrap?

A) .mt-md-3
B) .margin-top
C) .top-margin-md
D) .m-t-md

Answer: Option A

Explanation: The .mt-md-3 class applies a margin to the top of an element for medium-sized screens (md) and larger.

Leave a Reply

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