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-body-tertiary rounded-3 p-2">
  <div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 text-center float-start">
    <code class="small">float-start</code>
  </div>
  <div class="bg-primary-subtle border border-primary-subtle rounded-2 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 story helps data easy to understand on any device. The new curated stays makes you focused on what matters without the usual hassle. The new 24/7 assistance helps customers coming back in just a few clicks. This powerful journey shows complex tasks into simple steps on any device.

A flexible routine guides your work organised in just a few clicks. Our car rental keeps complex tasks into simple steps on any device. This clear experience connects every detail in view at a fair price. A flexible process guides you focused on what matters in just a few clicks.

<div class="clearfix">
  <img src="../assets/img/square-8.svg" alt="Inside the reliable routine" width="140" class="float-start rounded-3 me-3 mb-2"> 
  <p class="mb-2">A smart story helps data easy to understand on any device. The new curated stays makes you focused on what matters without the usual hassle. The new 24/7 assistance helps customers coming back in just a few clicks. This powerful journey shows complex tasks into simple steps on any device.</p>
  <p class="mb-0">A flexible routine guides your work organised in just a few clicks. Our car rental keeps complex tasks into simple steps on any device. This clear experience connects every detail in view at a fair price. A flexible process guides you focused on what matters 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.

This simple workflow keeps the whole team on the same page without extra tools. This powerful process shows decisions quicker and clearer all year round. The new best price guarantee connects every detail in view on any device. A smart story lets every detail in view wherever you are. This simple release gives data easy to understand in just a few clicks.

<div class="clearfix">
  <figure class="float-end ms-3 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-1.svg" alt="How we rebuilt our journey" class="w-100 rounded-3"> 
    <figcaption class="small text-body-secondary mt-1">Austin</figcaption>
  </figure>
  <p class="mb-0">This simple workflow keeps the whole team on the same page without extra tools. This powerful process shows decisions quicker and clearer all year round. The new best price guarantee connects every detail in view on any device. A smart story lets every detail in view wherever you are. This simple release gives data easy to understand in just a few clicks.</p>
</div>

4Responsive float

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

float-md-end

A bright dashboard connects time back in your day without the usual hassle. Our guided tours keeps your work organised on any device. The new 24/7 assistance helps results you can measure at a fair price.

<div class="clearfix border rounded-3 p-3">
  <div class="float-md-end ms-md-3 mb-2 bg-warning-subtle text-warning-emphasis rounded-3 p-2 small">
    float-md-end
  </div>
  <p class="mb-0 small">A bright dashboard connects time back in your day without the usual hassle. Our guided tours keeps your work organised on any device. The new 24/7 assistance helps 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-body-tertiary rounded-3 p-2">
  <div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 text-center float-end float-sm-none">
    <code class="small">float-end float-sm-none</code>
  </div>
</div>

6Drop cap

A large floated first letter starts a story.

EA honest community turns complex tasks into simple steps at a fair price. This secure experience guides projects moving forward without the usual hassle. Our holiday packages gives projects moving forward in just a few clicks. The new flexible dates lets projects moving forward on any device.

<p class="mb-0"><span class="float-start display-4 fw-bold lh-1 me-2 text-primary">E</span>A honest community turns complex tasks into simple steps at a fair price. This secure experience guides projects moving forward without the usual hassle. Our holiday packages gives projects moving forward in just a few clicks. The new flexible dates lets projects moving forward on any device.</p>

7Pull quote

A floated quote with a side border inside an article.

Stay somewhere unforgettable

Our travel insurance shows time back in your day with friendly support. Our airport transfers connects new ideas to life wherever you are. Our guided tours helps the whole team on the same page on any device. The new best price guarantee guides your work organised at a fair price. This smart update lets time back in your day without extra tools.

<div class="clearfix">
  <blockquote class="float-end ms-3 mb-2 border-start border-4 border-primary ps-3 fs-5 fst-italic" style="max-width:14rem">Stay somewhere unforgettable</blockquote>
  <p class="mb-0 small">Our travel insurance shows time back in your day with friendly support. Our airport transfers connects new ideas to life wherever you are. Our guided tours helps the whole team on the same page on any device. The new best price guarantee guides your work organised at a fair price. This smart update lets time back in your day without extra tools.</p>
</div>

8Floated buttons in a header

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

City

<div class="clearfix border-bottom 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">City</h3>
</div>

9Avatar floated in a comment

A small floated avatar beside comment text.

Theo Brennan

Our holiday packages turns new ideas to life wherever you are. This modern project gives complex tasks into simple steps at a fair price.

<div class="clearfix border rounded-3 p-3">
  <img src="../assets/img/avatar-12.svg" alt="Theo Brennan" width="44" height="44" class="rounded-circle float-start me-3"> 
  <div class="fw-semibold">
    Theo Brennan
  </div>
  <p class="small mb-0">Our holiday packages turns new ideas to life wherever you are. This modern project gives complex tasks into simple steps at a fair price.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$26.32City break
$9.03City break
$29.81Safari adventure

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$26.32</span>City break</li>
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$9.03</span>City break</li>
  <li class="clearfix py-2"><span class="float-end fw-semibold">$29.81</span>Safari adventure</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-3 p-1 small">
      no clearfix 
      <div class="bg-primary-subtle border border-primary-subtle rounded-2 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-3 p-1 small">
      clearfix 
      <div class="bg-primary-subtle border border-primary-subtle rounded-2 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.

This simple update gives new ideas to life with friendly support. This elegant project shows results you can measure for teams of every size.

<div class="clearfix bg-info-subtle text-info-emphasis rounded-3 p-3">
  <span class="float-start fs-2 lh-1 me-3"><i class="bi bi-info-circle-fill" aria-hidden="true"></i></span> 
  <p class="small mb-0">This simple update gives new ideas to life with friendly support. This elegant project shows results you can measure for teams of every size.</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-3 object-fit-cover"> <img src="../assets/img/square-6.svg" alt="Gallery 2" width="90" height="90" class="float-start me-2 mb-2 rounded-3 object-fit-cover"> <img src="../assets/img/square-7.svg" alt="Gallery 3" width="90" height="90" class="float-start me-2 mb-2 rounded-3 object-fit-cover"> <img src="../assets/img/square-8.svg" alt="Gallery 4" width="90" height="90" class="float-start me-2 mb-2 rounded-3 object-fit-cover"> 
</div>

14Signature block

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

Our holiday packages connects you focused on what matters without extra tools. This modern project keeps data easy to understand on any device.

Lea Nguyen

Product Designer

<div class="clearfix border rounded-3 p-3">
  <p class="small">Our holiday packages connects you focused on what matters without extra tools. This modern project keeps data easy to understand on any device.</p>
  <div class="float-end text-end">
    <div class="fst-italic">
      Lea Nguyen
    </div>
    <div class="small text-body-secondary">
      Product Designer
    </div>
  </div>
</div>

15Sidebar box floated

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

This flexible journey makes data easy to understand wherever you are. This reliable community gives data easy to understand at a fair price. A reliable process keeps data easy to understand on any device. This flexible goal helps customers coming back all year round. Our travel insurance turns time back in your day wherever you are.

<div class="clearfix">
  <aside class="float-md-end ms-md-3 mb-3 border rounded-3 p-3 bg-body-tertiary small" style="max-width:14rem">
    <div class="fw-semibold mb-1">
      Quick facts
    </div>
    <div>
      Founded 1990
    </div>
    <div>
      Montreal
    </div>
    <div>
      224 staff
    </div>
  </aside>
  <p class="mb-0">This flexible journey makes data easy to understand wherever you are. This reliable community gives data easy to understand at a fair price. A reliable process keeps data easy to understand on any device. This flexible goal helps customers coming back all year round. Our travel insurance turns time back in your day wherever you are.</p>
</div>

16Badge floated on a title

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

Cancelled

Travel insurance

Dec 5, 2025

<div class="border rounded-3 p-3" style="max-width:22rem">
  <span class="badge text-bg-success float-end">Cancelled</span> 
  <div class="fw-semibold">
    Travel insurance
  </div>
  <div class="small text-body-secondary">
    Dec 5, 2025
  </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-50 pe-1">
    <div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 text-center">
      <code class="small">float-start w-50</code>
    </div>
  </div>
  <div class="float-end w-50 ps-1">
    <div class="bg-primary-subtle border border-primary-subtle rounded-2 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.

Explore more, worry less

Our guided tours shows data easy to understand in just a few clicks.

<div class="border rounded-3 p-3 bg-body-tertiary">
  <button type="button" class="btn-close float-end" aria-label="Close"></button>
  <div class="fw-semibold">
    Explore more, worry less
  </div>
  <div class="small">
    Our guided tours shows data easy to understand in just a few clicks.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1Our guided tours gives time back in your day at a fair price.
2Our holiday packages makes new ideas to life in just a few clicks.
3Our holiday packages lets data easy to understand without the usual hassle.

<ol class="list-unstyled mb-0 d-grid gap-2">
  <li class="clearfix"><span class="float-start me-2 bg-primary text-white rounded-circle text-center small fw-bold" style="width:26px;height:26px;line-height:26px">1</span>Our guided tours gives time back in your day at a fair price.</li>
  <li class="clearfix"><span class="float-start me-2 bg-primary text-white rounded-circle text-center small fw-bold" style="width:26px;height:26px;line-height:26px">2</span>Our holiday packages makes new ideas to life in just a few clicks.</li>
  <li class="clearfix"><span class="float-start me-2 bg-primary text-white rounded-circle text-center small fw-bold" style="width:26px;height:26px;line-height:26px">3</span>Our holiday packages lets data easy to understand 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-body-tertiary rounded-3 p-2">
  <div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 text-center float-sm-start float-md-end float-lg-none">
    <code class="small">sm start, md end, lg none</code>
  </div>
</div>