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.

Our multi-currency wallets helps the whole team on the same page for teams of every size. Our expense tracking makes data easy to understand wherever you are. Our expense tracking turns new ideas to life on any device. This flexible journey helps new ideas to life with friendly support.

A powerful process turns complex tasks into simple steps for teams of every size. Our expense tracking helps complex tasks into simple steps from the very first day. A flexible team gives every detail in view on any device.

<div class="clearfix">
  <img src="../assets/img/square-1.svg" alt="Inside the clear journey" width="140" class="float-start rounded-3 me-3 mb-2"> 
  <p class="mb-2">Our multi-currency wallets helps the whole team on the same page for teams of every size. Our expense tracking makes data easy to understand wherever you are. Our expense tracking turns new ideas to life on any device. This flexible journey helps new ideas to life with friendly support.</p>
  <p class="mb-0">A powerful process turns complex tasks into simple steps for teams of every size. Our expense tracking helps complex tasks into simple steps from the very first day. A flexible team gives every detail in view on any device.</p>
</div>

3Image on the right

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

A friendly goal shows results you can measure for teams of every size. Our corporate cards lets new ideas to life from the very first day. Our business accounts connects every detail in view at a fair price. Our multi-currency wallets helps projects moving forward on any device. Our business accounts helps results you can measure 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-12.svg" alt="The fast goal checklist" class="w-100 rounded-3"> 
    <figcaption class="small text-body-secondary mt-1">Vancouver</figcaption>
  </figure>
  <p class="mb-0">A friendly goal shows results you can measure for teams of every size. Our corporate cards lets new ideas to life from the very first day. Our business accounts connects every detail in view at a fair price. Our multi-currency wallets helps projects moving forward on any device. Our business accounts helps results you can measure 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 practical community brings data easy to understand all year round. The new no hidden fees lets complex tasks into simple steps in just a few clicks. Our business accounts makes new ideas to life for teams of every size.

<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 practical community brings data easy to understand all year round. The new no hidden fees lets complex tasks into simple steps in just a few clicks. Our business accounts makes new ideas to life 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-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 project guides decisions quicker and clearer at a fair price. Our multi-currency wallets brings your work organised in just a few clicks. A friendly experience guides data easy to understand at a fair price. Our invoicing helps every detail in view at a fair price.

<p class="mb-0"><span class="float-start display-4 fw-bold lh-1 me-2 text-primary">M</span>A smart project guides decisions quicker and clearer at a fair price. Our multi-currency wallets brings your work organised in just a few clicks. A friendly experience guides data easy to understand at a fair price. Our invoicing helps every detail in view at a fair price.</p>

7Pull quote

A floated quote with a side border inside an article.

See every transaction in real time

The new instant notifications shows customers coming back wherever you are. Our corporate cards lets results you can measure from the very first day. The new bank-grade encryption connects projects moving forward from the very first day. Our multi-currency wallets guides time back in your day from the very first day. Our invoicing lets you focused on what matters for teams of every size.

<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">See every transaction in real time</blockquote>
  <p class="mb-0 small">The new instant notifications shows customers coming back wherever you are. Our corporate cards lets results you can measure from the very first day. The new bank-grade encryption connects projects moving forward from the very first day. Our multi-currency wallets guides time back in your day from the very first day. Our invoicing lets you focused on what matters for teams of every size.</p>
</div>

8Floated buttons in a header

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

Payroll

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

9Avatar floated in a comment

A small floated avatar beside comment text.

Felix Ortega

A focused process connects every detail in view without extra tools. A honest story gives new ideas to life for teams of every size.

<div class="clearfix border rounded-3 p-3">
  <img src="../assets/img/avatar-11.svg" alt="Felix Ortega" width="44" height="44" class="rounded-circle float-start me-3"> 
  <div class="fw-semibold">
    Felix Ortega
  </div>
  <p class="small mb-0">A focused process connects every detail in view without extra tools. A honest story gives new ideas to life for teams of every size.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$5.45FX transfer
$11.06Virtual card
$14.41FX transfer

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

The new spending limits keeps every detail in view with friendly support. A clear journey lets complex tasks into simple steps without extra tools.

<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">The new spending limits keeps every detail in view with friendly support. A clear journey lets complex tasks into simple steps without extra tools.</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 corporate cards makes the whole team on the same page at a fair price. Our multi-currency wallets makes new ideas to life on any device.

Lucas Rossi

Backend Engineer

<div class="clearfix border rounded-3 p-3">
  <p class="small">Our corporate cards makes the whole team on the same page at a fair price. Our multi-currency wallets makes new ideas to life on any device.</p>
  <div class="float-end text-end">
    <div class="fst-italic">
      Lucas Rossi
    </div>
    <div class="small text-body-secondary">
      Backend Engineer
    </div>
  </div>
</div>

15Sidebar box floated

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

The new bank-grade encryption keeps your work organised wherever you are. This secure experience guides new ideas to life all year round. The new spending limits helps every detail in view without extra tools. The new spending limits lets your work organised from the very first day. Our payroll turns the whole team on the same page on any device.

<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 1994
    </div>
    <div>
      Edinburgh
    </div>
    <div>
      400 staff
    </div>
  </aside>
  <p class="mb-0">The new bank-grade encryption keeps your work organised wherever you are. This secure experience guides new ideas to life all year round. The new spending limits helps every detail in view without extra tools. The new spending limits lets your work organised from the very first day. Our payroll turns the whole team on the same page on any device.</p>
</div>

16Badge floated on a title

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

On hold

Business accounts

Nov 8, 2025

<div class="border rounded-3 p-3" style="max-width:22rem">
  <span class="badge text-bg-success float-end">On hold</span> 
  <div class="fw-semibold">
    Business accounts
  </div>
  <div class="small text-body-secondary">
    Nov 8, 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.

See every transaction in real time

Our expense tracking connects data easy to understand wherever you are.

<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">
    See every transaction in real time
  </div>
  <div class="small">
    Our expense tracking connects data easy to understand wherever you are.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1This focused workflow keeps complex tasks into simple steps without extra tools.
2Our multi-currency wallets makes your work organised at a fair price.
3This bright idea guides every detail in view for teams of every size.

<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>This focused workflow keeps complex tasks into simple steps 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">2</span>Our multi-currency wallets makes your work organised 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">3</span>This bright idea guides every detail in view for teams of every size.</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>