Bootstrap MCQs – Bootstrap Flexbox & Utilities

11.) Which class makes a flex container stack items vertically?

A) .flex-row
B) .flex-column
C) .d-block
D) .stack-flex

Answer: Option B

Explanation: The .flex-column class changes the default row layout to a column layout, stacking items vertically.

12.) How do you prevent Flexbox items from wrapping to the next line?

A) .d-inline-flex
B) .no-wrap
C) .flex-no-wrap
D) .flex-nowrap

Answer: Option D

Explanation: The .flex-nowrap class prevents flex items from wrapping, keeping them in a single row or column.

13.) Which class makes an element take the full width of its container?

A) .w-100
B) .full-width
C) .width-max
D) .d-block

Answer: Option A

Explanation: The .w-100 class sets the element’s width to 100%, making it take up the full container width.

14.) How do you align a single flex item at the bottom of its container?

A) .align-items-end
B) .align-self-end
C) .justify-content-end
D) .bottom-flex

Answer: Option B

Explanation: The .align-self-end class aligns a single flex item at the bottom, overriding the parent’s alignment.

15.) Which Bootstrap class is used to make a flex container take up the full available width?

A) .d-flex
B) .h-100
C) .w-100
D) .flex-fill

Answer: Option C

Explanation: The .w-100 class makes an element take up the full width of its parent container.

16.) QuHow do you allow Flexbox items to wrap to the next line?estion

A) .flex-wrap
B) .wrap-flex
C) .d-flex-wrap
D) .overflow-wrap

Answer: Option A

Explanation: The .flex-wrap class allows flex items to wrap onto the next line when the container gets too small.

17.) Which class is used to center text using Bootstrap utilities?

A) .text-align-center
B) opti.center-texton2
C) .text-center
D) .align-text-middle

Answer: Option C

Explanation: The .text-center class centers text horizontally inside an element.

18.) What Bootstrap class applies padding to all sides of an element?

A) .p-3
B) .pad-3
C) .padding-all
D) .p-all

Answer: Option A

Explanation: The .p-3 class applies padding to all sides of an element, using Bootstrap’s spacing scale.

19.) How do you push an item to the right inside a flex container?

A) .me-auto
B) .ms-auto
C) .justify-content-end
D) .justify-content-start

Answer: Option B

Explanation: The .ms-auto class pushes an item to the right by setting its left margin to auto.

20.) Which class applies equal horizontal margins automatically?

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

Answer: Option B

Explanation: The .mx-auto class centers an element horizontally by setting equal left and right margins.

Leave a Reply

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