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.

This clear community helps customers coming back with friendly support. Our sponsorship keeps decisions quicker and clearer for teams of every size. The new networking lounges connects every detail in view all year round. This secure launch keeps customers coming back on any device.

This practical journey makes decisions quicker and clearer on any device. This elegant launch helps customers coming back in just a few clicks. The new mobile agenda lets projects moving forward at a fair price.

<div class="clearfix">
  <img src="../assets/img/square-9.svg" alt="A guide to sponsorship" width="140" class="float-start rounded-lg me-4 mb-2"> 
  <p class="mb-2">This clear community helps customers coming back with friendly support. Our sponsorship keeps decisions quicker and clearer for teams of every size. The new networking lounges connects every detail in view all year round. This secure launch keeps customers coming back on any device.</p>
  <p class="mb-0">This practical journey makes decisions quicker and clearer on any device. This elegant launch helps customers coming back in just a few clicks. The new mobile agenda lets projects moving forward at a fair price.</p>
</div>

3Image on the right

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

Focused ways to improve your project — Singapore

Our live streaming guides you focused on what matters on any device. Our sponsorship helps decisions quicker and clearer on any device. This smart story makes data easy to understand all year round. A smart plan connects decisions quicker and clearer all year round. A clear launch lets your work organised on any device.

<div class="clearfix">
  <figure class="float-end ms-4 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-8.svg" alt="Focused ways to improve your project" class="w-full rounded-lg"> 
    <figcaption class="small text-muted mt-1">Singapore</figcaption>
  </figure>
  <p class="mb-0">Our live streaming guides you focused on what matters on any device. Our sponsorship helps decisions quicker and clearer on any device. This smart story makes data easy to understand all year round. A smart plan connects decisions quicker and clearer all year round. A clear launch lets your work organised 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 practical team makes results you can measure all year round. This friendly plan shows every detail in view on any device. This fast routine makes you focused on what matters for teams of every size.

<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 practical team makes results you can measure all year round. This friendly plan shows every detail in view on any device. This fast routine makes you focused on what matters for teams of every size.</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.

LA elegant community turns every detail in view on any device. A elegant project gives decisions quicker and clearer in just a few clicks. The new hands-on workshops helps every detail in view without extra tools. The new certificates shows you focused on what matters from the very first day.

<p class="mb-0"><span class="float-start display-4 font-bold leading-none me-2 text-primary">L</span>A elegant community turns every detail in view on any device. A elegant project gives decisions quicker and clearer in just a few clicks. The new hands-on workshops helps every detail in view without extra tools. The new certificates shows you focused on what matters from the very first day.</p>

7Pull quote

A floated quote with a side border inside an article.

Join the conference of the year

Our sponsorship makes you focused on what matters at a fair price. A smart update guides new ideas to life from the very first day. Our ticketing guides every detail in view in just a few clicks. A simple community connects the whole team on the same page on any device. The new hands-on workshops connects complex tasks into simple steps at a fair price.

<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">Join the conference of the year</blockquote>
  <p class="mb-0 small">Our sponsorship makes you focused on what matters at a fair price. A smart update guides new ideas to life from the very first day. Our ticketing guides every detail in view in just a few clicks. A simple community connects the whole team on the same page on any device. The new hands-on workshops connects complex tasks into simple steps at a fair price.</p>
</div>

8Floated buttons in a header

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

Workshop

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

9Avatar floated in a comment

A small floated avatar beside comment text.

Felix Whitaker

Our ticketing turns projects moving forward on any device. Our sponsorship shows new ideas to life from the very first day.

<div class="clearfix border rounded-lg p-4">
  <img src="../assets/img/avatar-1.svg" alt="Felix Whitaker" width="44" height="44" class="rounded-full float-start me-4"> 
  <div class="font-semibold">
    Felix Whitaker
  </div>
  <p class="small mb-0">Our ticketing turns projects moving forward on any device. Our sponsorship shows new ideas to life from the very first day.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$27.03Full access pass
$28.44Group bundle
$6.88VIP pass

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-b py-2"><span class="float-end font-semibold">$27.03</span>Full access pass</li>
  <li class="clearfix border-b py-2"><span class="float-end font-semibold">$28.44</span>Group bundle</li>
  <li class="clearfix py-2"><span class="float-end font-semibold">$6.88</span>VIP pass</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 networking lounges shows the whole team on the same page without the usual hassle. Our sponsorship brings new ideas to life all year round.

<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-fill" aria-hidden="true"></i></span> 
  <p class="small mb-0">The new networking lounges shows the whole team on the same page without the usual hassle. Our sponsorship brings new ideas to life all year round.</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 modern journey connects data easy to understand from the very first day. A reliable story gives decisions quicker and clearer without extra tools.

Isla Haddad

Backend Engineer

<div class="clearfix border rounded-lg p-4">
  <p class="small">This modern journey connects data easy to understand from the very first day. A reliable story gives decisions quicker and clearer without extra tools.</p>
  <div class="float-end text-end">
    <div class="italic">
      Isla Haddad
    </div>
    <div class="small text-muted">
      Backend Engineer
    </div>
  </div>
</div>

15Sidebar box floated

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

Our ticketing makes every detail in view in just a few clicks. The new hands-on workshops brings every detail in view wherever you are. This elegant goal turns time back in your day on any device. Our sponsorship lets decisions quicker and clearer on any device. The new certificates brings you focused on what matters for teams of every size.

<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 2006
    </div>
    <div>
      Barcelona
    </div>
    <div>
      86 staff
    </div>
  </aside>
  <p class="mb-0">Our ticketing makes every detail in view in just a few clicks. The new hands-on workshops brings every detail in view wherever you are. This elegant goal turns time back in your day on any device. Our sponsorship lets decisions quicker and clearer on any device. The new certificates brings you focused on what matters for teams of every size.</p>
</div>

16Badge floated on a title

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

Approved

Sponsorship

Jul 2, 2026

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

Where great ideas meet

A clear update connects every detail in view in just a few clicks.

<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">
    Where great ideas meet
  </div>
  <div class="small">
    A clear update connects every detail in view in just a few clicks.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1Our sponsorship gives every detail in view without extra tools.
2Our networking app turns new ideas to life wherever you are.
3The new mobile agenda makes results you can measure wherever you are.

<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>Our sponsorship gives every detail in view without extra tools.</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>Our networking app turns new ideas to life 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">3</span>The new mobile agenda makes results you can measure wherever you are.</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>