Float

Float utilities move an element to the start or end of its container so text wraps around it, at any breakpoint (float-md-end) or not at all (float-none). Wrap floats in a clearfix parent so the container keeps its height. For layouts, prefer flex; floats shine for images in articles.

1Float start and end

float-start and float-end move an element to a side; clearfix on the parent contains them.

float-start

float-end

<div class="clearfix bg-surface-3 rounded-lg p-2">
  <div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center float-start">
    <code class="small">float-start</code>
  </div>
  <div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center float-end">
    <code class="small">float-end</code>
  </div>
</div>

2Text wrapping an image

A floated image with a margin lets the paragraph flow around it.

A smart release gives data easy to understand without the usual hassle. Our education fund helps every detail in view all year round. This smart experience connects you focused on what matters from the very first day. A flexible goal keeps time back in your day in just a few clicks.

A clear goal turns complex tasks into simple steps on any device. This honest goal makes decisions quicker and clearer all year round. The new secure giving connects results you can measure in just a few clicks.

<div class="clearfix">
  <img src="../assets/img/square-5.svg" alt="How we rebuilt our launch" width="140" class="float-start rounded-lg me-4 mb-2"> 
  <p class="mb-2">A smart release gives data easy to understand without the usual hassle. Our education fund helps every detail in view all year round. This smart experience connects you focused on what matters from the very first day. A flexible goal keeps time back in your day in just a few clicks.</p>
  <p class="mb-0">A clear goal turns complex tasks into simple steps on any device. This honest goal makes decisions quicker and clearer all year round. The new secure giving connects results you can measure in just a few clicks.</p>
</div>

3Image on the right

float-end with ms-3 puts the figure on the right of the text.

A simple idea connects new ideas to life in just a few clicks. A flexible project connects customers coming back for teams of every size. This clear dashboard helps every detail in view without the usual hassle. A modern launch keeps results you can measure in just a few clicks. The new secure giving gives you focused on what matters on any device.

<div class="clearfix">
  <figure class="float-end ms-4 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-7.svg" alt="A guide to food relief" class="w-full rounded-lg"> 
    <figcaption class="small text-muted mt-1">Vancouver</figcaption>
  </figure>
  <p class="mb-0">A simple idea connects new ideas to life in just a few clicks. A flexible project connects customers coming back for teams of every size. This clear dashboard helps every detail in view without the usual hassle. A modern launch keeps results you can measure in just a few clicks. The new secure giving gives you focused on what matters on any device.</p>
</div>

4Responsive float

float-md-end floats only from md; on phones the box stays in the normal flow.

float-md-end

This powerful journey brings the whole team on the same page from the very first day. The new impact tracking shows every detail in view in just a few clicks. This reliable update connects results you can measure at a fair price.

<div class="clearfix border rounded-lg p-4">
  <div class="md:float-end md:ms-4 mb-2 bg-warning-subtle text-warning-emphasis rounded-lg p-2 small">
    float-md-end
  </div>
  <p class="mb-0 small">This powerful journey brings the whole team on the same page from the very first day. The new impact tracking shows every detail in view in just a few clicks. This reliable update connects results you can measure at a fair price.</p>
</div>

5float-none

float-none cancels a float, for example float-end float-sm-none.

float-end float-sm-none

<div class="clearfix bg-surface-3 rounded-lg p-2">
  <div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center float-end sm:float-none">
    <code class="small">float-end float-sm-none</code>
  </div>
</div>

6Drop cap

A large floated first letter starts a story.

JThis calm community connects time back in your day wherever you are. Our clean water makes time back in your day all year round. The new tax receipts guides your work organised from the very first day. This friendly idea gives projects moving forward without extra tools.

<p class="mb-0"><span class="float-start display-4 font-bold leading-none me-2 text-primary">J</span>This calm community connects time back in your day wherever you are. Our clean water makes time back in your day all year round. The new tax receipts guides your work organised from the very first day. This friendly idea gives projects moving forward without extra tools.</p>

7Pull quote

A floated quote with a side border inside an article.

Small acts, big impact

This fast idea turns you focused on what matters without extra tools. This practical update gives complex tasks into simple steps in just a few clicks. Our food relief gives results you can measure at a fair price. The new secure giving makes the whole team on the same page in just a few clicks. The new local partners shows every detail in view in just a few clicks.

<div class="clearfix">
  <blockquote class="float-end ms-4 mb-2 border-s border-4 border-primary ps-4 text-lg italic" style="max-width:14rem">Small acts, big impact</blockquote>
  <p class="mb-0 small">This fast idea turns you focused on what matters without extra tools. This practical update gives complex tasks into simple steps in just a few clicks. Our food relief gives results you can measure at a fair price. The new secure giving makes the whole team on the same page in just a few clicks. The new local partners shows every detail in view in just a few clicks.</p>
</div>

8Floated buttons in a header

A heading with a float-end button; clearfix keeps the border below both.

Health

<div class="clearfix border-b pb-2">
  <button type="button" class="btn btn-sm btn-primary float-end"><i class="bi bi-plus-lg" aria-hidden="true"></i> New</button>
  <h3 class="h5 mb-0">Health</h3>
</div>

9Avatar floated in a comment

A small floated avatar beside comment text.

Aria Kowalski

Our food relief gives time back in your day on any device. A elegant journey keeps data easy to understand on any device.

<div class="clearfix border rounded-lg p-4">
  <img src="../assets/img/avatar-5.svg" alt="Aria Kowalski" width="44" height="44" class="rounded-full float-start me-4"> 
  <div class="font-semibold">
    Aria Kowalski
  </div>
  <p class="small mb-0">Our food relief gives time back in your day on any device. A elegant journey keeps data easy to understand on any device.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$18.53Monthly gift
$13.38School kit
$20.83Monthly gift

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-b py-2"><span class="float-end font-semibold">$18.53</span>Monthly gift</li>
  <li class="clearfix border-b py-2"><span class="float-end font-semibold">$13.38</span>School kit</li>
  <li class="clearfix py-2"><span class="float-end font-semibold">$20.83</span>Monthly gift</li>
</ul>

11Without clearfix

Without clearfix the parent collapses; with it the background wraps the floats.

no clearfix

float

clearfix

float

<div class="row g-2">
  <div class="col-sm-6">
    <div class="bg-danger-subtle rounded-lg p-1 small">
      no clearfix 
      <div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center float-end">
        <code class="small">float</code>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="clearfix bg-success-subtle rounded-lg p-1 small">
      clearfix 
      <div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center float-end">
        <code class="small">float</code>
      </div>
    </div>
  </div>
</div>

12Floated icon in a note

A big icon floated to the start of a note.

The new tax receipts lets projects moving forward for teams of every size. The new secure giving helps every detail in view without the usual hassle.

<div class="clearfix bg-info-subtle text-info-emphasis rounded-lg p-4">
  <span class="float-start text-3xl leading-none me-4"><i class="bi bi-info-circle" aria-hidden="true"></i></span> 
  <p class="small mb-0">The new tax receipts lets projects moving forward for teams of every size. The new secure giving helps every detail in view without the usual hassle.</p>
</div>

13Gallery of floated tiles

Floated tiles with margins form a simple wrapping gallery.

<div class="clearfix">
  <img src="../assets/img/square-5.svg" alt="Gallery 1" width="90" height="90" class="float-start me-2 mb-2 rounded-lg object-cover"> <img src="../assets/img/square-6.svg" alt="Gallery 2" width="90" height="90" class="float-start me-2 mb-2 rounded-lg object-cover"> <img src="../assets/img/square-7.svg" alt="Gallery 3" width="90" height="90" class="float-start me-2 mb-2 rounded-lg object-cover"> <img src="../assets/img/square-8.svg" alt="Gallery 4" width="90" height="90" class="float-start me-2 mb-2 rounded-lg object-cover"> 
</div>

14Signature block

float-end with text-end places a signature at the bottom right of a letter.

This reliable experience lets data easy to understand without the usual hassle. The new tax receipts shows decisions quicker and clearer in just a few clicks.

Omar Ibrahim

Art Director

<div class="clearfix border rounded-lg p-4">
  <p class="small">This reliable experience lets data easy to understand without the usual hassle. The new tax receipts shows decisions quicker and clearer in just a few clicks.</p>
  <div class="float-end text-end">
    <div class="italic">
      Omar Ibrahim
    </div>
    <div class="small text-muted">
      Art Director
    </div>
  </div>
</div>

15Sidebar box floated

A fact box floated to the end of an article on md and up.

A reliable release brings new ideas to life at a fair price. Our clean water makes the whole team on the same page at a fair price. Our disaster response keeps complex tasks into simple steps with friendly support. The new impact tracking guides complex tasks into simple steps from the very first day. This flexible project lets you focused on what matters in just a few clicks.

<div class="clearfix">
  <aside class="md:float-end md:ms-4 mb-4 border rounded-lg p-4 bg-surface-3 small" style="max-width:14rem">
    <div class="font-semibold mb-1">
      Quick facts
    </div>
    <div>
      Founded 2013
    </div>
    <div>
      Kyoto
    </div>
    <div>
      124 staff
    </div>
  </aside>
  <p class="mb-0">A reliable release brings new ideas to life at a fair price. Our clean water makes the whole team on the same page at a fair price. Our disaster response keeps complex tasks into simple steps with friendly support. The new impact tracking guides complex tasks into simple steps from the very first day. This flexible project lets you focused on what matters in just a few clicks.</p>
</div>

16Badge floated on a title

A small badge floated to the end of a card title.

Cancelled

Education fund

Feb 23, 2026

<div class="border rounded-lg p-4" style="max-width:22rem">
  <span class="badge text-bg-success float-end">Cancelled</span> 
  <div class="font-semibold">
    Education fund
  </div>
  <div class="small text-muted">
    Feb 23, 2026
  </div>
</div>

17Two floated columns

Two w-50 boxes, one float-start and one float-end, fill a row.

float-start w-50

float-end w-50

<div class="clearfix">
  <div class="float-start w-1/2 pe-1">
    <div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center">
      <code class="small">float-start w-50</code>
    </div>
  </div>
  <div class="float-end w-1/2 ps-1">
    <div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center">
      <code class="small">float-end w-50</code>
    </div>
  </div>
</div>

18Floated close icon

A dismiss icon floated to the end of a message box.

Every donation makes a difference

Our clean water guides the whole team on the same page on any device.

<div class="border rounded-lg p-4 bg-surface-3">
  <button type="button" class="btn-close float-end" aria-label="Close"></button>
  <div class="font-semibold">
    Every donation makes a difference
  </div>
  <div class="small">
    Our clean water guides the whole team on the same page on any device.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1A honest dashboard guides decisions quicker and clearer wherever you are.
2This fast experience lets your work organised for teams of every size.
3The new transparent reports connects decisions quicker and clearer without the usual hassle.

<ol class="list-unstyled mb-0 grid gap-2">
  <li class="clearfix"><span class="float-start me-2 bg-primary text-white rounded-full text-center small font-bold" style="width:26px;height:26px;line-height:26px">1</span>A honest dashboard guides decisions quicker and clearer wherever you are.</li>
  <li class="clearfix"><span class="float-start me-2 bg-primary text-white rounded-full text-center small font-bold" style="width:26px;height:26px;line-height:26px">2</span>This fast experience lets your work organised for teams of every size.</li>
  <li class="clearfix"><span class="float-start me-2 bg-primary text-white rounded-full text-center small font-bold" style="width:26px;height:26px;line-height:26px">3</span>The new transparent reports connects decisions quicker and clearer without the usual hassle.</li>
</ol>

20Floats per breakpoint

float-sm-start, float-md-end and float-lg-none switch side as the screen grows.

sm start, md end, lg none

<div class="clearfix bg-surface-3 rounded-lg p-2">
  <div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center sm:float-start md:float-end lg:float-none">
    <code class="small">sm start, md end, lg none</code>
  </div>
</div>