0
0
Bootsrapmarkup~5 mins

Float and clear utilities in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Float and clear utilities help you position elements side by side or control how elements wrap around each other. They make layout easier without writing custom CSS.

When you want an image to sit on the left or right side of text.
When you want buttons or icons to align left or right inside a container.
When you want to stop elements from wrapping around floated items.
When you want to quickly fix layout issues caused by floating elements.
When you want responsive control of element alignment on different screen sizes.
Syntax
Bootsrap
float-start
float-end
float-none
clear-start
clear-end
clear-both

float-start floats element to the left in left-to-right languages.

float-end floats element to the right in left-to-right languages.

clear-* classes stop elements from wrapping around floated elements.

Examples
This floats the first div to the left, so the second div flows beside it.
Bootsrap
<div class="float-start">Floated left</div>
<div>Normal flow</div>
This floats the image to the right, letting text wrap on the left.
Bootsrap
<img src="image.jpg" class="float-end" alt="Example image">
<p>Text wraps on the left side.</p>
This element will appear below any floated elements above it.
Bootsrap
<div class="clear-both">This clears floats above it.</div>
Sample Program

This example shows an image floated left with text wrapping around it, a paragraph cleared below the float, and a box floated right with normal text below it.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Float and Clear Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-4">
    <h1>Float and Clear Utilities Demo</h1>
    <p>
      <img src="https://via.placeholder.com/100" class="float-start me-3 mb-3" alt="Placeholder image">
      This text wraps around the image floated to the start (left). The image uses <code>float-start</code> and margin utilities for spacing.
    </p>
    <p class="clear-both">
      This paragraph uses <code>clear-both</code> so it appears below the floated image and text wraps.
    </p>
    <div class="float-end bg-primary text-white p-2">
      Floated to the end (right)
    </div>
    <div class="clearfix mb-3"></div>
    <p>
      This text flows normally below the floated box on the right.
    </p>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Float utilities respect the text direction (left-to-right or right-to-left).

Use clear-* classes to prevent layout issues caused by floats.

Combine float utilities with margin utilities for better spacing.

Summary

Float utilities position elements left or right easily.

Clear utilities stop elements from wrapping around floats.

They help create simple layouts without custom CSS.