Bootsrapmarkup~30 mins

Float and clear utilities in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Float and Clear Utilities with Bootstrap

📖 Scenario: You are creating a simple webpage layout that uses Bootstrap's float and clear utilities to arrange images and text side by side and then clear the floats to avoid layout issues.

🎯 Goal: Build a webpage with two images floated left and right, some text below them that clears the floats, ensuring the text starts below the images without wrapping around them.

📋 What You'll Learn

Use Bootstrap 5 float utilities to float images left and right

Use Bootstrap 5 clear utility to clear floats before the text

Include a container with a heading and paragraphs

Ensure the layout is responsive and accessible

💡 Why This Matters

🌍 Real World

Floating elements is a common technique in web design to place images or blocks side by side. Clearing floats is important to keep the layout clean and prevent overlapping or wrapping issues.

💼 Career

Understanding float and clear utilities is essential for front-end developers to build responsive and well-structured web pages using Bootstrap or similar CSS frameworks.

Progress0 / 4 steps

Create the HTML skeleton with Bootstrap CSS link

Write the basic HTML5 structure with lang="en", meta charset="UTF-8", and viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head>. Inside the <body>, add a <div> with class container and inside it add an <h1> with the text Float and Clear Utilities Demo.

Bootsrap

Need a hint?

Remember to include the Bootstrap CSS link from the official CDN inside the <head> section.

Add two images with Bootstrap float utilities

Inside the div with class container, below the h1, add two img elements. The first image should have the class float-start and use the source https://via.placeholder.com/150 with alt text Left image. The second image should have the class float-end and use the source https://via.placeholder.com/150 with alt text Right image.

Bootsrap




    
    
    Float and Clear Utilities Demo
    


    
        Float and Clear Utilities Demo

Need a hint?

Use float-start to float the first image left and float-end to float the second image right.

Add a paragraph that clears the floats

Below the two floated images inside the container, add a div with the Bootstrap class clearfix. Inside this div, add a p element with the text This text starts below the floated images because of the clear fix.

Bootsrap




    
    
    Float and Clear Utilities Demo
    


    
        Float and Clear Utilities Demo

Need a hint?

The clearfix class helps to clear floats so the text does not wrap around the images.

Add a footer with centered text and clear floats

Bootsrap




    
    
    Float and Clear Utilities Demo
    


    
        Float and Clear Utilities Demo
        
        
        
            This text starts below the floated images because of the clear fix.

Need a hint?

The footer should clear any floats and center its text using Bootstrap classes.