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 fast routine makes new ideas to life for teams of every size. This practical dashboard guides data easy to understand on any device. The new accounting sync brings decisions quicker and clearer without the usual hassle.

This clear workflow connects your work organised in just a few clicks. This flexible team makes every detail in view with friendly support. This friendly idea helps your work organised for teams of every size. Our payroll lets customers coming back at a fair price.

<div class="clearfix">
  <img src="../assets/img/square-2.svg" alt="8 lessons from our project" width="140" class="float-start rounded-3 me-3 mb-2"> 
  <p class="mb-2">A fast routine makes new ideas to life for teams of every size. This practical dashboard guides data easy to understand on any device. The new accounting sync brings decisions quicker and clearer without the usual hassle.</p>
  <p class="mb-0">This clear workflow connects your work organised in just a few clicks. This flexible team makes every detail in view with friendly support. This friendly idea helps your work organised for teams of every size. Our payroll lets customers coming back at a fair price.</p>
</div>

3Image on the right

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

This focused experience shows you focused on what matters without extra tools. A elegant plan brings you focused on what matters from the very first day. A focused goal makes customers coming back all year round. A simple experience keeps projects moving forward from the very first day. The new 24/7 support turns you focused on what matters with friendly support.

<div class="clearfix">
  <figure class="float-end ms-3 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-11.svg" alt="Inside the smart process" class="w-100 rounded-3"> 
    <figcaption class="small text-body-secondary mt-1">Prague</figcaption>
  </figure>
  <p class="mb-0">This focused experience shows you focused on what matters without extra tools. A elegant plan brings you focused on what matters from the very first day. A focused goal makes customers coming back all year round. A simple experience keeps projects moving forward from the very first day. The new 24/7 support turns you focused on what matters 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 instant notifications gives every detail in view with friendly support. Our multi-currency wallets guides your work organised for teams of every size. Our expense tracking helps decisions quicker and clearer without the usual hassle.

<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">The new instant notifications gives every detail in view with friendly support. Our multi-currency wallets guides your work organised for teams of every size. Our expense tracking helps decisions quicker and clearer without the usual hassle.</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.

MA smart routine guides new ideas to life without extra tools. Our business accounts gives decisions quicker and clearer with friendly support. A reliable routine gives your work organised without the usual hassle. The new bank-grade encryption makes results you can measure from the very first day.

<p class="mb-0"><span class="float-start display-4 fw-bold lh-1 me-2 text-primary">M</span>A smart routine guides new ideas to life without extra tools. Our business accounts gives decisions quicker and clearer with friendly support. A reliable routine gives your work organised without the usual hassle. The new bank-grade encryption makes results you can measure from the very first day.</p>

7Pull quote

A floated quote with a side border inside an article.

Smarter payments for growing companies

The new bank-grade encryption keeps data easy to understand wherever you are. This fast workflow keeps data easy to understand for teams of every size. Our multi-currency wallets helps the whole team on the same page with friendly support. A flexible plan gives time back in your day all year round. A practical story guides new ideas to life at a fair price.

<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">Smarter payments for growing companies</blockquote>
  <p class="mb-0 small">The new bank-grade encryption keeps data easy to understand wherever you are. This fast workflow keeps data easy to understand for teams of every size. Our multi-currency wallets helps the whole team on the same page with friendly support. A flexible plan gives time back in your day all year round. A practical story guides new ideas to life at a fair price.</p>
</div>

8Floated buttons in a header

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

Payments

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

9Avatar floated in a comment

A small floated avatar beside comment text.

Ethan Alvarez

A honest community makes results you can measure all year round. Our multi-currency wallets keeps decisions quicker and clearer on any device.

<div class="clearfix border rounded-3 p-3">
  <img src="../assets/img/avatar-7.svg" alt="Ethan Alvarez" width="44" height="44" class="rounded-circle float-start me-3"> 
  <div class="fw-semibold">
    Ethan Alvarez
  </div>
  <p class="small mb-0">A honest community makes results you can measure all year round. Our multi-currency wallets keeps decisions quicker and clearer on any device.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$9.46Virtual card
$4.42FX transfer
$28.49Basic account

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$9.46</span>Virtual card</li>
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$4.42</span>FX transfer</li>
  <li class="clearfix py-2"><span class="float-end fw-semibold">$28.49</span>Basic account</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.

A flexible journey brings data easy to understand from the very first day. The new no hidden fees brings the whole team on the same page wherever you are.

<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" aria-hidden="true"></i></span> 
  <p class="small mb-0">A flexible journey brings data easy to understand from the very first day. The new no hidden fees brings the whole team on the same page wherever you are.</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.

The new accounting sync brings time back in your day without the usual hassle. A bright idea turns your work organised at a fair price.

Ella Delgado

Marketing Lead

<div class="clearfix border rounded-3 p-3">
  <p class="small">The new accounting sync brings time back in your day without the usual hassle. A bright idea turns your work organised at a fair price.</p>
  <div class="float-end text-end">
    <div class="fst-italic">
      Ella Delgado
    </div>
    <div class="small text-body-secondary">
      Marketing Lead
    </div>
  </div>
</div>

15Sidebar box floated

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

Our multi-currency wallets lets time back in your day all year round. Our expense tracking lets decisions quicker and clearer on any device. Our payroll keeps every detail in view with friendly support. Our business accounts turns every detail in view from the very first day. The new accounting sync connects complex tasks into simple steps for teams of every size.

<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 2011
    </div>
    <div>
      Singapore
    </div>
    <div>
      261 staff
    </div>
  </aside>
  <p class="mb-0">Our multi-currency wallets lets time back in your day all year round. Our expense tracking lets decisions quicker and clearer on any device. Our payroll keeps every detail in view with friendly support. Our business accounts turns every detail in view from the very first day. The new accounting sync connects complex tasks into simple steps for teams of every size.</p>
</div>

16Badge floated on a title

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

Draft

Multi-currency wallets

Sep 27, 2025

<div class="border rounded-3 p-3" style="max-width:22rem">
  <span class="badge text-bg-success float-end">Draft</span> 
  <div class="fw-semibold">
    Multi-currency wallets
  </div>
  <div class="small text-body-secondary">
    Sep 27, 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.

Smarter payments for growing companies

This clear routine keeps every detail in view without the usual hassle.

<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">
    Smarter payments for growing companies
  </div>
  <div class="small">
    This clear routine keeps every detail in view without the usual hassle.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1The new no hidden fees guides complex tasks into simple steps all year round.
2The new spending limits helps every detail in view without extra tools.
3Our payroll connects every detail in view on any device.

<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>The new no hidden fees guides complex tasks into simple steps all year round.</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>The new spending limits helps every detail in view without extra tools.</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 payroll connects every detail in view on any device.</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>