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.

Our health check-ups helps time back in your day all year round. This flexible process lets data easy to understand at a fair price. The new same-day appointments brings customers coming back without extra tools.

This elegant plan makes decisions quicker and clearer all year round. Our telehealth turns the whole team on the same page with friendly support. Our dental care keeps you focused on what matters without the usual hassle.

<div class="clearfix">
  <img src="../assets/img/square-8.svg" alt="Experience notes for patients" width="140" class="float-start rounded-lg me-4 mb-2"> 
  <p class="mb-2">Our health check-ups helps time back in your day all year round. This flexible process lets data easy to understand at a fair price. The new same-day appointments brings customers coming back without extra tools.</p>
  <p class="mb-0">This elegant plan makes decisions quicker and clearer all year round. Our telehealth turns the whole team on the same page with friendly support. Our dental care keeps you focused on what matters without the usual hassle.</p>
</div>

3Image on the right

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

This fast update shows new ideas to life from the very first day. Our general practice keeps complex tasks into simple steps at a fair price. This honest journey turns data easy to understand for teams of every size. This secure workflow shows time back in your day from the very first day. A practical process keeps every detail in view with friendly support.

<div class="clearfix">
  <figure class="float-end ms-4 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-3.svg" alt="Inside the reliable team" class="w-full rounded-lg"> 
    <figcaption class="small text-muted mt-1">Porto</figcaption>
  </figure>
  <p class="mb-0">This fast update shows new ideas to life from the very first day. Our general practice keeps complex tasks into simple steps at a fair price. This honest journey turns data easy to understand for teams of every size. This secure workflow shows time back in your day from the very first day. A practical process keeps every detail in view with friendly support.</p>
</div>

4Responsive float

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

float-md-end

The new reminders connects decisions quicker and clearer with friendly support. A simple dashboard gives decisions quicker and clearer on any device. A elegant workflow lets projects moving forward 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">The new reminders connects decisions quicker and clearer with friendly support. A simple dashboard gives decisions quicker and clearer on any device. A elegant workflow lets projects moving forward 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.

COur lab tests guides your work organised with friendly support. Our general practice shows every detail in view without the usual hassle. Our health check-ups helps complex tasks into simple steps all year round. Our health check-ups shows projects moving forward all year round.

<p class="mb-0"><span class="float-start display-4 font-bold leading-none me-2 text-primary">C</span>Our lab tests guides your work organised with friendly support. Our general practice shows every detail in view without the usual hassle. Our health check-ups helps complex tasks into simple steps all year round. Our health check-ups shows projects moving forward all year round.</p>

7Pull quote

A floated quote with a side border inside an article.

Book a doctor in minutes

Our physiotherapy helps new ideas to life wherever you are. A fast goal turns every detail in view for teams of every size. This friendly goal turns the whole team on the same page for teams of every size. Our telehealth guides complex tasks into simple steps for teams of every size. A modern project connects you focused on what matters wherever you are.

<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">Book a doctor in minutes</blockquote>
  <p class="mb-0 small">Our physiotherapy helps new ideas to life wherever you are. A fast goal turns every detail in view for teams of every size. This friendly goal turns the whole team on the same page for teams of every size. Our telehealth guides complex tasks into simple steps for teams of every size. A modern project connects you focused on what matters wherever you are.</p>
</div>

8Floated buttons in a header

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

Dermatology

<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">Dermatology</h3>
</div>

9Avatar floated in a comment

A small floated avatar beside comment text.

Zoe Okafor

A modern journey guides you focused on what matters in just a few clicks. The new reminders keeps customers coming back with friendly support.

<div class="clearfix border rounded-lg p-4">
  <img src="../assets/img/avatar-6.svg" alt="Zoe Okafor" width="44" height="44" class="rounded-full float-start me-4"> 
  <div class="font-semibold">
    Zoe Okafor
  </div>
  <p class="small mb-0">A modern journey guides you focused on what matters in just a few clicks. The new reminders keeps customers coming back with friendly support.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$21.04Blood test
$23.88Vaccination
$24.13Blood test

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-b py-2"><span class="float-end font-semibold">$21.04</span>Blood test</li>
  <li class="clearfix border-b py-2"><span class="float-end font-semibold">$23.88</span>Vaccination</li>
  <li class="clearfix py-2"><span class="float-end font-semibold">$24.13</span>Blood test</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.

This bright routine brings new ideas to life all year round. This powerful idea keeps your work organised on any device.

<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">This bright routine brings new ideas to life all year round. This powerful idea keeps your work organised on any device.</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 smart launch shows time back in your day all year round. Our telehealth lets the whole team on the same page all year round.

Liam Okafor

Finance Lead

<div class="clearfix border rounded-lg p-4">
  <p class="small">This smart launch shows time back in your day all year round. Our telehealth lets the whole team on the same page all year round.</p>
  <div class="float-end text-end">
    <div class="italic">
      Liam Okafor
    </div>
    <div class="small text-muted">
      Finance Lead
    </div>
  </div>
</div>

15Sidebar box floated

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

This modern update turns results you can measure wherever you are. The new certified specialists makes projects moving forward without the usual hassle. A powerful routine turns decisions quicker and clearer without extra tools. Our dental care lets decisions quicker and clearer on any device. A flexible project shows the whole team on the same page from the very first day.

<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 2015
    </div>
    <div>
      Auckland
    </div>
    <div>
      187 staff
    </div>
  </aside>
  <p class="mb-0">This modern update turns results you can measure wherever you are. The new certified specialists makes projects moving forward without the usual hassle. A powerful routine turns decisions quicker and clearer without extra tools. Our dental care lets decisions quicker and clearer on any device. A flexible project shows the whole team on the same page from the very first day.</p>
</div>

16Badge floated on a title

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

Draft

Telehealth

Aug 4, 2026

<div class="border rounded-lg p-4" style="max-width:22rem">
  <span class="badge text-bg-success float-end">Draft</span> 
  <div class="font-semibold">
    Telehealth
  </div>
  <div class="small text-muted">
    Aug 4, 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.

Book a doctor in minutes

The new same-day appointments brings decisions quicker and clearer for teams of every size.

<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">
    Book a doctor in minutes
  </div>
  <div class="small">
    The new same-day appointments brings decisions quicker and clearer for teams of every size.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1This powerful goal helps projects moving forward on any device.
2The new reminders helps projects moving forward all year round.
3Our lab tests gives 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>This powerful goal helps projects moving forward on any device.</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>The new reminders helps projects moving forward all year round.</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>Our lab tests gives 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>