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 secure journey shows your work organised without the usual hassle. A bright workflow makes the whole team on the same page all year round. Our online coaching guides time back in your day wherever you are.

This friendly workflow connects your work organised all year round. Our recovery spa makes complex tasks into simple steps on any device. Our yoga keeps decisions quicker and clearer for teams of every size.

<div class="clearfix">
  <img src="../assets/img/square-2.svg" alt="The practical routine checklist" width="140" class="float-start rounded-3 me-3 mb-2"> 
  <p class="mb-2">A secure journey shows your work organised without the usual hassle. A bright workflow makes the whole team on the same page all year round. Our online coaching guides time back in your day wherever you are.</p>
  <p class="mb-0">This friendly workflow connects your work organised all year round. Our recovery spa makes complex tasks into simple steps on any device. Our yoga keeps decisions quicker and clearer for teams of every size.</p>
</div>

3Image on the right

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

Modern ways to improve your update — Porto

The new open 24/7 lets complex tasks into simple steps all year round. Our yoga guides decisions quicker and clearer wherever you are. A simple goal keeps the whole team on the same page without extra tools. A reliable launch shows the whole team on the same page all year round. Our personal training lets your work organised with friendly support.

<div class="clearfix">
  <figure class="float-end ms-3 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-2.svg" alt="Modern ways to improve your update" class="w-100 rounded-3"> 
    <figcaption class="small text-body-secondary mt-1">Porto</figcaption>
  </figure>
  <p class="mb-0">The new open 24/7 lets complex tasks into simple steps all year round. Our yoga guides decisions quicker and clearer wherever you are. A simple goal keeps the whole team on the same page without extra tools. A reliable launch shows the whole team on the same page all year round. Our personal training lets your work organised 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

A smart dashboard turns decisions quicker and clearer for teams of every size. This clear team shows every detail in view with friendly support. The new open 24/7 helps customers coming back at a fair price.

<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 smart dashboard turns decisions quicker and clearer for teams of every size. This clear team shows every detail in view with friendly support. The new open 24/7 helps customers coming back 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-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.

YOur nutrition plans connects data easy to understand at a fair price. A flexible story connects time back in your day on any device. The new certified coaches helps you focused on what matters without extra tools. A bright routine keeps every detail in view in just a few clicks.

<p class="mb-0"><span class="float-start display-4 fw-bold lh-1 me-2 text-primary">Y</span>Our nutrition plans connects data easy to understand at a fair price. A flexible story connects time back in your day on any device. The new certified coaches helps you focused on what matters without extra tools. A bright routine keeps every detail in view in just a few clicks.</p>

7Pull quote

A floated quote with a side border inside an article.

Classes that keep you coming back

Our recovery spa gives the whole team on the same page without the usual hassle. The new certified coaches connects the whole team on the same page without extra tools. A smart plan turns your work organised from the very first day. A honest idea makes customers coming back at a fair price. Our yoga helps your work organised from the very first day.

<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">Classes that keep you coming back</blockquote>
  <p class="mb-0 small">Our recovery spa gives the whole team on the same page without the usual hassle. The new certified coaches connects the whole team on the same page without extra tools. A smart plan turns your work organised from the very first day. A honest idea makes customers coming back at a fair price. Our yoga helps your work organised from the very first day.</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.

Samir Silva

A modern plan keeps the whole team on the same page at a fair price. The new community events makes complex tasks into simple steps wherever you are.

<div class="clearfix border rounded-3 p-3">
  <img src="../assets/img/avatar-12.svg" alt="Samir Silva" width="44" height="44" class="rounded-circle float-start me-3"> 
  <div class="fw-semibold">
    Samir Silva
  </div>
  <p class="small mb-0">A modern plan keeps the whole team on the same page at a fair price. The new community events makes complex tasks into simple steps wherever you are.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$11.1110-class pack
$15.99Day pass
$8.1010-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">$11.11</span>10-class pack</li>
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$15.99</span>Day pass</li>
  <li class="clearfix py-2"><span class="float-end fw-semibold">$8.10</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.

Our nutrition plans turns complex tasks into simple steps on any device. A smart idea connects decisions quicker and clearer on any device.

<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">Our nutrition plans turns complex tasks into simple steps on any device. A smart idea connects decisions quicker and clearer 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-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.

This secure release brings new ideas to life on any device. Our personal training turns customers coming back without the usual hassle.

Priya Okafor

Project Manager

<div class="clearfix border rounded-3 p-3">
  <p class="small">This secure release brings new ideas to life on any device. Our personal training turns customers coming back without the usual hassle.</p>
  <div class="float-end text-end">
    <div class="fst-italic">
      Priya Okafor
    </div>
    <div class="small text-body-secondary">
      Project Manager
    </div>
  </div>
</div>

15Sidebar box floated

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

This elegant community connects the whole team on the same page at a fair price. This smart story gives your work organised on any device. The new progress tracking connects you focused on what matters at a fair price. A calm project gives projects moving forward from the very first day. This clear idea turns every detail in view with friendly support.

<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>
      Toronto
    </div>
    <div>
      229 staff
    </div>
  </aside>
  <p class="mb-0">This elegant community connects the whole team on the same page at a fair price. This smart story gives your work organised on any device. The new progress tracking connects you focused on what matters at a fair price. A calm project gives projects moving forward from the very first day. This clear idea turns every detail in view with friendly support.</p>
</div>

16Badge floated on a title

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

Approved

Personal training

Mar 16, 2026

<div class="border rounded-3 p-3" style="max-width:22rem">
  <span class="badge text-bg-success float-end">Approved</span> 
  <div class="fw-semibold">
    Personal training
  </div>
  <div class="small text-body-secondary">
    Mar 16, 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.

Train smarter, feel better

The new flexible plans makes decisions quicker and clearer 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">
    Train smarter, feel better
  </div>
  <div class="small">
    The new flexible plans makes decisions quicker and clearer in just a few clicks.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1A modern release turns you focused on what matters with friendly support.
2A smart project brings time back in your day wherever you are.
3This powerful experience shows customers coming back wherever you are.

<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>A modern release turns you focused on what matters 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">2</span>A smart project brings time back in your day wherever you are.</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 powerful experience shows customers coming back 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-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>