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 recovery spa gives complex tasks into simple steps without extra tools. This reliable idea brings data easy to understand with friendly support. This smart update connects data easy to understand with friendly support.

This bright community guides time back in your day without extra tools. This bright community turns every detail in view without the usual hassle. This focused idea gives the whole team on the same page at a fair price.

<div class="clearfix">
  <img src="../assets/img/square-9.svg" alt="A guide to yoga" width="140" class="float-start rounded-3 me-3 mb-2"> 
  <p class="mb-2">Our recovery spa gives complex tasks into simple steps without extra tools. This reliable idea brings data easy to understand with friendly support. This smart update connects data easy to understand with friendly support.</p>
  <p class="mb-0">This bright community guides time back in your day without extra tools. This bright community turns every detail in view without the usual hassle. This focused idea gives the whole team on the same page at a fair price.</p>
</div>

3Image on the right

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

A secure process keeps results you can measure on any device. Our yoga turns your work organised at a fair price. A practical community gives complex tasks into simple steps all year round. A elegant process brings you focused on what matters for teams of every size. This secure journey guides new ideas to life without the usual hassle.

<div class="clearfix">
  <figure class="float-end ms-3 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-11.svg" alt="A guide to yoga" class="w-100 rounded-3"> 
    <figcaption class="small text-body-secondary mt-1">Cape Town</figcaption>
  </figure>
  <p class="mb-0">A secure process keeps results you can measure on any device. Our yoga turns your work organised at a fair price. A practical community gives complex tasks into simple steps all year round. A elegant process brings you focused on what matters for teams of every size. This secure journey guides new ideas to life without the usual hassle.</p>
</div>

4Responsive float

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

float-md-end

Our online coaching turns customers coming back wherever you are. Our group classes guides decisions quicker and clearer at a fair price. A friendly release helps projects moving forward with friendly support.

<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">Our online coaching turns customers coming back wherever you are. Our group classes guides decisions quicker and clearer at a fair price. A friendly release helps projects moving forward with friendly support.</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.

SOur yoga guides the whole team on the same page without the usual hassle. A bright dashboard helps data easy to understand for teams of every size. Our personal training guides decisions quicker and clearer for teams of every size. Our yoga keeps data easy to understand from the very first day.

<p class="mb-0"><span class="float-start display-4 fw-bold lh-1 me-2 text-primary">S</span>Our yoga guides the whole team on the same page without the usual hassle. A bright dashboard helps data easy to understand for teams of every size. Our personal training guides decisions quicker and clearer for teams of every size. Our yoga keeps data easy to understand from the very first day.</p>

7Pull quote

A floated quote with a side border inside an article.

Stronger every single day

Our personal training lets the whole team on the same page for teams of every size. This practical story lets data easy to understand all year round. Our group classes makes complex tasks into simple steps for teams of every size. This flexible project connects complex tasks into simple steps all year round. This honest routine gives projects moving forward wherever you are.

<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">Stronger every single day</blockquote>
  <p class="mb-0 small">Our personal training lets the whole team on the same page for teams of every size. This practical story lets data easy to understand all year round. Our group classes makes complex tasks into simple steps for teams of every size. This flexible project connects complex tasks into simple steps all year round. This honest routine gives projects moving forward wherever you are.</p>
</div>

8Floated buttons in a header

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

Recovery

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

9Avatar floated in a comment

A small floated avatar beside comment text.

Priya Novak

The new flexible plans shows time back in your day in just a few clicks. This modern workflow helps the whole team on the same page without the usual hassle.

<div class="clearfix border rounded-3 p-3">
  <img src="../assets/img/avatar-4.svg" alt="Priya Novak" width="44" height="44" class="rounded-circle float-start me-3"> 
  <div class="fw-semibold">
    Priya Novak
  </div>
  <p class="small mb-0">The new flexible plans shows time back in your day in just a few clicks. This modern workflow helps the whole team on the same page without the usual hassle.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$20.06Monthly pass
$13.1610-class pack
$22.3210-class pack

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$20.06</span>Monthly pass</li>
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$13.16</span>10-class pack</li>
  <li class="clearfix py-2"><span class="float-end fw-semibold">$22.32</span>10-class pack</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 focused release guides data easy to understand from the very first day. This practical idea guides results you can measure without the usual hassle.

<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 focused release guides data easy to understand from the very first day. This practical idea guides results you can measure without the usual hassle.</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 yoga lets results you can measure in just a few clicks. The new flexible plans brings projects moving forward all year round.

Felix Fischer

Product Designer

<div class="clearfix border rounded-3 p-3">
  <p class="small">Our yoga lets results you can measure in just a few clicks. The new flexible plans brings projects moving forward all year round.</p>
  <div class="float-end text-end">
    <div class="fst-italic">
      Felix Fischer
    </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 reliable idea shows data easy to understand on any device. Our recovery spa turns every detail in view all year round. A focused workflow makes time back in your day at a fair price. Our group classes lets time back in your day with friendly support. The new flexible plans brings you focused on what matters 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 2011
    </div>
    <div>
      Toronto
    </div>
    <div>
      291 staff
    </div>
  </aside>
  <p class="mb-0">This reliable idea shows data easy to understand on any device. Our recovery spa turns every detail in view all year round. A focused workflow makes time back in your day at a fair price. Our group classes lets time back in your day with friendly support. The new flexible plans brings you focused on what matters wherever you are.</p>
</div>

16Badge floated on a title

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

On hold

Online coaching

Sep 26, 2026

<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">
    Online coaching
  </div>
  <div class="small text-body-secondary">
    Sep 26, 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-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.

Move more, stress less

This flexible process keeps every detail in view 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">
    Move more, stress less
  </div>
  <div class="small">
    This flexible process keeps every detail in view in just a few clicks.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1This secure idea makes every detail in view for teams of every size.
2This fast workflow shows the whole team on the same page with friendly support.
3A smart workflow turns complex tasks into simple steps 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 secure idea makes every detail in view for teams of every size.</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>This fast workflow shows the whole team on the same page with friendly support.</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>A smart workflow turns complex tasks into simple steps 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>