Float and clear utilities in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to float the div to the right using Bootstrap utility classes.

Bootsrap

<div class="[1]">This div floats right.</div>

Drag options to blanks, or click blank then click option'

Afloat-end

Bfloat-start

Cfloat-left

Dfloat-right

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'float-right' which is deprecated in Bootstrap 5.

Confusing 'float-start' with right float.

Bootstrap uses float-end to float elements to the right in LTR layouts.

2fill in blank

medium

Complete the code to clear floats after a floated element using Bootstrap utility classes.

Bootsrap

<div class="float-start">Floated left</div>
<div class="[1]">Clears the float</div>

Drag options to blanks, or click blank then click option'

Aclear-start

Bclear-end

Cclear-both

Dclearfix

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'clear-both' which is not a Bootstrap utility class.

Trying to use directional clear classes that don't exist in Bootstrap.

The clearfix class in Bootstrap clears floats by adding a pseudo-element after the floated elements.

3fill in blank

hard

Fix the error in the code to float the image to the left using Bootstrap utilities.

Bootsrap

<img src="image.jpg" class="[1]" alt="Sample image">

Drag options to blanks, or click blank then click option'

Afloat-right

Bfloat-left

Cfloat-start

Dfloat-end

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'float-left' which is deprecated in Bootstrap 5.

Using 'float-end' which floats right.

In Bootstrap 5, float-start floats elements to the left in LTR layouts. The class float-left is deprecated.

4fill in blank

hard

Fill both blanks to float a paragraph to the right and then clear the float using Bootstrap utilities.

Bootsrap

<p class="[1]">This paragraph floats right.</p>
<div class="[2]"></div>

Drag options to blanks, or click blank then click option'

Afloat-end

Bfloat-start

Cclearfix

Dclear-fix

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'clear-fix' which is not a valid Bootstrap class.

Using 'float-start' instead of 'float-end' for right float.

Use float-end to float right and clearfix to clear floats in Bootstrap.

5fill in blank

hard

Fill all three blanks to create a floated box to the left, a floated box to the right, and then clear both floats using Bootstrap utilities.

Bootsrap

<div class="box [1]">Left box</div>
<div class="box [2]">Right box</div>
<div class="[3]"></div>

Drag options to blanks, or click blank then click option'

Afloat-start

Bfloat-end

Cclearfix

Dclear-both

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'clear-both' which is not a Bootstrap utility class.

Mixing up 'float-start' and 'float-end' classes.

Use float-start for left float, float-end for right float, and clearfix to clear floats in Bootstrap.