Flex utilities in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the Bootstrap class d-flex do?

In Bootstrap, what is the main effect of adding the class d-flex to an element?

A It centers the element horizontally on the page.

B It makes the element a flex container, enabling flexbox layout for its children.

C It applies a fixed width and height to the element.

D It hides the element from the page.

💡 Hint

Think about what 'd' and 'flex' might stand for in CSS display properties.

The class d-flex sets the CSS display property to flex, turning the element into a flex container. This allows its child elements to be arranged using flexbox rules.

📝 Syntax

intermediate

Which Bootstrap class aligns flex items vertically centered?

Given a flex container in Bootstrap, which class will align its child items vertically centered?

A align-items-center

B justify-content-center

C align-content-start

D flex-wrap-nowrap

💡 Hint

Vertical alignment in flexbox is controlled by the align-items property.

The class align-items-center sets align-items: center; on the flex container, which vertically centers the flex items along the cross axis.

❓ selector

advanced

What is the effect of justify-content-between in Bootstrap flex?

In a Bootstrap flex container, what visual layout does the class justify-content-between produce?

A It places the first item at the start and the last item at the end, with equal space between all items.

B It centers all items horizontally with equal space around them.

C It stacks all items vertically with no spacing.

D It hides all items except the first and last.

💡 Hint

Think about how justify-content controls horizontal spacing in flexbox.

The class justify-content-between applies justify-content: space-between;, which places the first flex item at the start, the last at the end, and evenly distributes space between the items.

❓ layout

advanced

How to make a flex container wrap items in Bootstrap?

Which Bootstrap class makes flex items wrap onto multiple lines inside a flex container?

A flex-fill

B flex-nowrap

C flex-column

D flex-wrap

💡 Hint

Wrapping controls whether items stay on one line or move to new lines.

The class flex-wrap applies flex-wrap: wrap;, allowing flex items to move to the next line if they don't fit in one row.

❓ accessibility

expert

Which practice improves accessibility when using Bootstrap flex for navigation?

When using Bootstrap flex utilities to create a horizontal navigation bar, which practice best improves accessibility?

A Hide the navigation from screen readers using <code>aria-hidden="true"</code>.

B Use <div> elements with flex classes and add click handlers only for mouse users.

C Use semantic <nav> element with <ul> and <li> for links, and ensure keyboard focus styles are visible.

D Use only icons without text labels to save space.

💡 Hint

Think about how screen readers and keyboard users navigate menus.

Using semantic HTML elements like <nav>, <ul>, and <li> helps screen readers understand the navigation structure. Visible focus styles help keyboard users see where they are.