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.

Practice

1. What does the Bootstrap class float-start do to an element?

easy

A. It floats the element to the right side of its container.

B. It centers the element horizontally.

C. It floats the element to the left side of its container.

D. It clears any floating elements before it.

Solution

1. Step 1: Understand float-start meaning

   The class float-start in Bootstrap floats an element to the start side of the container, which is left in left-to-right languages.

2. Step 2: Compare options with float-start behavior

   The float-start class floats the element to the left side of its container. This matches 'It floats the element to the left side of its container.' Other options describe floating right, centering, or clearing floats.

3. Final Answer:

   It floats the element to the left side of its container. -> Option C

4. Quick Check:

   float-start = float left [OK]

Hint: float-start always means float left in LTR layouts [OK]

Common Mistakes:

• Confusing float-start with float-end
• Thinking float-start centers the element
• Mixing float with clear utilities

2. Which of the following is the correct Bootstrap class to clear floats on an element?

easy

A. clearfix

B. float-clear

C. clear-fix

D. clear-start

Solution

1. Step 1: Recall Bootstrap clear utility class

   Bootstrap uses the class clearfix to clear floats and prevent wrapping issues.

2. Step 2: Check options for correct spelling and usage

   clearfix is the correct class name. The other options like float-clear, clear-fix, and clear-start do not exist in Bootstrap.

3. Final Answer:

   clearfix -> Option A

4. Quick Check:

   Clear floats = clearfix [OK]

Hint: Remember: clearfix clears floats, float-clear is not valid [OK]

Common Mistakes:

• Using float-clear instead of clearfix
• Misspelling clearfix as clear-fix
• Confusing float and clear classes

3. What will be the visual layout result of this HTML snippet?

<div>
  <div class="float-end">Box A</div>
  <div>Box B</div>
</div>

medium

A. Box A and Box B appear side by side, Box A on the right.

B. Box A appears on the left, Box B appears to the right of Box A.

C. Box B overlaps Box A because of float-end.

D. Box A appears on the right, Box B appears below Box A.

Solution

1. Step 1: Understand float-end effect on Box A

   The class float-end floats Box A to the right side of the container.

2. Step 2: Analyze Box B position without float

   Box B is not floated, so it flows normally. Because Box A is floated right, Box B will appear on the left side, next to Box A, if space allows.

3. Final Answer:

   Box A and Box B appear side by side, Box A on the right. -> Option A

4. Quick Check:

   float-end floats right, next element flows beside [OK]

Hint: Floated elements float, others flow around them [OK]

Common Mistakes:

• Assuming non-floated elements always go below floats
• Thinking float-end floats left
• Believing floats cause overlap without clearing

4. Identify the problem in this code snippet and choose the fix:

<div>
  <div class="float-start">Left Box</div>
  <div class="float-end">Content Box</div>
</div>

The parent div collapses in height due to floated children. What should be added?

medium

A. Add clear-start to Content Box.

B. Add float-end to Content Box.

C. Add float-start to Content Box as well.

D. Add clearfix class to the parent <div>.

Solution

1. Step 1: Understand float-start effect on Left Box

   The float-start on Left Box and float-end on Content Box take both children out of normal flow, causing the parent container to collapse.

2. Step 2: Use clearfix to fix float overlap

   Adding clearfix to the parent container clears floats, forcing it to expand and contain the floated children properly.

3. Final Answer:

   Add clearfix class to the parent <div>. -> Option D

4. Quick Check:

   Clear floats with clearfix on parent [OK]

Hint: Use clearfix on parent to fix float overlap [OK]

Common Mistakes:

• Adding float classes to non-floated elements
• Using non-existent clear-start class
• Not clearing floats causing layout break

5. You want two boxes side by side: the first floats left, the second should not wrap around it but appear below. Which Bootstrap classes should you use?

hard

A. First box: float-start, second box: clear-start

B. First box: float-start, second box: clearfix

C. First box: float-start, second box: clear-fix

D. First box: float-start, second box: clear-start (Note: clear-start is not a Bootstrap class)

Solution

1. Step 1: Float first box left with float-start

   The first box uses float-start to float left as required.

2. Step 2: Prevent second box wrapping with clearfix

   To stop the second box from wrapping around the floated first box, apply clearfix to the second box or its container to clear the float.

3. Final Answer:

   First box: float-start, second box: clearfix -> Option B

4. Quick Check:

   Use clearfix to clear floats below floated elements [OK]

Hint: Clear floats with clearfix to avoid wrapping [OK]

Common Mistakes:

• Using clear-start which is not a Bootstrap class
• Misspelling clearfix as clear-fix
• Not clearing floats causing wrapping