Float and clear utilities in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Bootstrap class .float-start do?

It makes an element float to the left side of its container, similar to CSS float: left;.

beginner

How do you clear floats in Bootstrap using utility classes?

Use the <code>.clearfix</code> class on a container to clear floated child elements, ensuring the container expands to contain them.

beginner

What is the difference between .float-start and .float-end in Bootstrap?

.float-start floats an element to the left, while .float-end floats it to the right, respecting text direction.

intermediate

Why is clearing floats important in web layouts?

Clearing floats prevents parent containers from collapsing when their child elements are floated, maintaining proper layout structure.

intermediate

How does Bootstrap's <code>.clearfix</code> class work under the hood?

It uses a CSS pseudo-element ::after with content: "", display: table, and clear: both to clear floats.

Which Bootstrap class floats an element to the right?

A .float-end

B .float-start

C .float-right

D .float-left

.float-end floats elements to the right respecting text direction. .float-start floats left.

What is the purpose of the .clearfix class in Bootstrap?

A To float elements

B To add margin

C To clear floated elements inside a container

D To hide elements

.clearfix clears floats so the container wraps floated children properly.

If you want an element to float left in Bootstrap, which class do you use?

A .float-end

B .float-start

C .float-left

D .float-clear

.float-start floats elements to the left side.

What CSS property does .clearfix use to clear floats?

A position: relative

B float: none

C display: none

D clear: both

.clearfix uses clear: both to clear floats.

Which of these is NOT a Bootstrap float utility class?

A .float-center

B .float-end

C .clearfix

D .float-start

Bootstrap does not have a .float-center class.

Explain how to use Bootstrap float utilities to position elements and why clearing floats is necessary.

Think about how floating affects layout and how Bootstrap helps manage it.

Describe what happens visually when you apply .float-start to an element and do not clear the float in its container.

Imagine a box inside a container that shrinks unexpectedly.