Float and clear utilities in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap float utilities

Which Bootstrap class will float an element to the right on all screen sizes?

A float-end

B float-right

C float-sm-end

D float-left

💡 Hint

Bootstrap 5 replaced float-right with a new naming convention.

In Bootstrap 5, float-end floats elements to the right on all screen sizes. The older float-right class was used in Bootstrap 4 but is deprecated.

📝 Syntax

intermediate

Correct usage of clear utility classes

Which class will clear floats on all screen sizes in Bootstrap 5?

A clear-float

B clear-fix

C clearfix

D clear

💡 Hint

Bootstrap 5 uses a specific class to clear floats.

The clearfix class is used in Bootstrap 5 to clear floats and ensure that a container wraps floated children properly.

❓ rendering

advanced

Visual effect of float and clear utilities

Given two div elements inside a container, the first with class float-start and the second with class clearfix, what will be the visual layout?

Bootsrap

<div class="container">
  <div class="float-start">Box 1</div>
  <div class="clearfix">Box 2</div>
</div>

A Box 1 floats left, Box 2 appears beside Box 1, container height collapses

B Box 1 floats left, Box 2 appears below Box 1, container height includes both boxes

C Both boxes appear side by side floated left, container height collapses

D Box 1 and Box 2 both float left, container height includes only Box 1

💡 Hint

Clearfix forces the next element to clear previous floats.

The float-start floats Box 1 to the left. The clearfix on Box 2 clears the float, so Box 2 appears below Box 1. The container's height includes both boxes because clearfix fixes float collapse.

❓ selector

advanced

Responsive float utility classes

Which Bootstrap class floats an element to the right only on medium (md) and larger screens?

A float-lg-end

B float-right-md

C float-end-md

D float-md-end

💡 Hint

Bootstrap uses breakpoint prefixes before the utility name.

The class float-md-end applies float right starting at the medium breakpoint and up. The other options are invalid or incorrectly ordered.

❓ accessibility

expert

Accessibility impact of float utilities

What is a potential accessibility concern when using float utilities to reorder content visually without changing the HTML order?

A Screen readers may read content in the original HTML order, causing confusion if visual order differs

B Float utilities automatically update the tab order to match visual order

C Using float utilities disables keyboard navigation on floated elements

D Float utilities add ARIA roles that override semantic HTML

💡 Hint

Visual order and DOM order can differ with floats.

Floats only change visual placement. Screen readers and keyboard navigation follow the HTML source order, so if visual order differs, users relying on assistive tech may get confused.