Challenge your understanding of Bootstrap’s flexbox layout system and alignment utilities with this focused quiz. Explore key concepts such as flex direction, vertical alignment, justification classes, and responsive alignment techniques to sharpen your responsive web design skills.
Which utility class would you use to arrange Bootstrap flex container items vertically rather than horizontally on medium devices and above?
Explanation: The 'flex-md-column' class sets the flex direction to column on medium devices and larger, stacking items vertically. 'flex-row' arranges items horizontally, not vertically. 'flex-md-row' also creates a horizontal layout from medium size onwards. 'flex-column-reverse' reverses the column direction but does not restrict the layout to medium devices only.
If you want to center items vertically within a Bootstrap flex container, which alignment utility class should you apply?
Explanation: 'align-items-center' centers flex items along the vertical axis within their container, making it the correct choice here. 'justify-content-center' centers items horizontally, not vertically. 'align-content-end' aligns rows to the bottom but is only effective with multiple lines. 'justify-items-center' is not a standard Bootstrap utility class.
Which Bootstrap utility class will evenly distribute flex items across the main axis with equal space between them, as in a three-column navigation bar?
Explanation: 'justify-content-between' distributes items along the main axis with equal space between each pair of items, which is perfect for navigation bars. 'align-items-between' does not exist in the utility class set. 'justify-content-end' simply aligns items at the end. 'align-content-between' affects space between rows, not the main axis spacing.
To center items horizontally only on small screens and align left on larger screens in a flex container, which combination of utility classes should be used?
Explanation: 'justify-content-center' centers items on all screens, but combined with 'justify-content-md-start', items are only centered on small screens and left-aligned starting from medium screens upwards. 'align-items-center align-items-md-start' changes vertical alignment, not the horizontal axis. 'justify-items-center' and 'justify-items-lg-left' are not correct Bootstrap classes. 'flex-sm-center flex-lg-left' are invalid class names.
Which Bootstrap flex utility class will reverse the horizontal order of items in a flex row container?
Explanation: 'flex-row-reverse' reverses the order of items along the horizontal (row) axis within the flex container. 'order-last' only affects a single item's order, not the whole container. 'flex-column-reverse' reverses items vertically, not horizontally. 'justify-content-reverse' is not a valid Bootstrap utility class.