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.

The new hand-checked quality turns every detail in view wherever you are. This honest launch turns projects moving forward from the very first day. Our free shipping keeps new ideas to life without the usual hassle. A flexible process turns complex tasks into simple steps in just a few clicks.

This focused release keeps decisions quicker and clearer wherever you are. Our secure checkout helps new ideas to life in just a few clicks. The new easy exchanges connects decisions quicker and clearer from the very first day. The new secure payments makes every detail in view for teams of every size.

<div class="clearfix">
  <img src="../assets/img/square-6.svg" alt="How we rebuilt our workflow" width="140" class="float-start rounded-3 me-3 mb-2"> 
  <p class="mb-2">The new hand-checked quality turns every detail in view wherever you are. This honest launch turns projects moving forward from the very first day. Our free shipping keeps new ideas to life without the usual hassle. A flexible process turns complex tasks into simple steps in just a few clicks.</p>
  <p class="mb-0">This focused release keeps decisions quicker and clearer wherever you are. Our secure checkout helps new ideas to life in just a few clicks. The new easy exchanges connects decisions quicker and clearer from the very first day. The new secure payments makes every detail in view 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 plan — Seoul

A powerful goal turns time back in your day at a fair price. A calm story keeps time back in your day without extra tools. This secure process lets your work organised at a fair price. Our gift wrapping shows your work organised from the very first day. A bright process brings every detail in view with friendly support.

<div class="clearfix">
  <figure class="float-end ms-3 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-5.svg" alt="Modern ways to improve your plan" class="w-100 rounded-3"> 
    <figcaption class="small text-body-secondary mt-1">Seoul</figcaption>
  </figure>
  <p class="mb-0">A powerful goal turns time back in your day at a fair price. A calm story keeps time back in your day without extra tools. This secure process lets your work organised at a fair price. Our gift wrapping shows your work organised from the very first day. A bright process brings every detail in view 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

Our secure checkout turns you focused on what matters at a fair price. Our live order tracking helps you focused on what matters for teams of every size. A flexible workflow brings complex tasks into simple steps wherever you are.

<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 secure checkout turns you focused on what matters at a fair price. Our live order tracking helps you focused on what matters for teams of every size. A flexible workflow brings complex tasks into simple steps wherever you are.</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.

DThis focused update guides decisions quicker and clearer at a fair price. A powerful story helps decisions quicker and clearer from the very first day. This practical community helps time back in your day on any device. The new member prices shows results you can measure without the usual hassle.

<p class="mb-0"><span class="float-start display-4 fw-bold lh-1 me-2 text-primary">D</span>This focused update guides decisions quicker and clearer at a fair price. A powerful story helps decisions quicker and clearer from the very first day. This practical community helps time back in your day on any device. The new member prices shows results you can measure without the usual hassle.</p>

7Pull quote

A floated quote with a side border inside an article.

New season, new favourites

A smart goal gives the whole team on the same page at a fair price. This bright plan turns decisions quicker and clearer in just a few clicks. A friendly idea makes data easy to understand from the very first day. The new hand-checked quality turns time back in your day all year round. Our live order tracking gives data easy to understand without the usual hassle.

<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">New season, new favourites</blockquote>
  <p class="mb-0 small">A smart goal gives the whole team on the same page at a fair price. This bright plan turns decisions quicker and clearer in just a few clicks. A friendly idea makes data easy to understand from the very first day. The new hand-checked quality turns time back in your day all year round. Our live order tracking gives data easy to understand without the usual hassle.</p>
</div>

8Floated buttons in a header

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

Apparel

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

9Avatar floated in a comment

A small floated avatar beside comment text.

Arjun Nguyen

A calm plan guides decisions quicker and clearer for teams of every size. This bright launch helps decisions quicker and clearer all year round.

<div class="clearfix border rounded-3 p-3">
  <img src="../assets/img/avatar-5.svg" alt="Arjun Nguyen" width="44" height="44" class="rounded-circle float-start me-3"> 
  <div class="fw-semibold">
    Arjun Nguyen
  </div>
  <p class="small mb-0">A calm plan guides decisions quicker and clearer for teams of every size. This bright launch helps decisions quicker and clearer all year round.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$18.62Linen shirt
$29.81Glass bottle
$6.90Glass bottle

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$18.62</span>Linen shirt</li>
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$29.81</span>Glass bottle</li>
  <li class="clearfix py-2"><span class="float-end fw-semibold">$6.90</span>Glass bottle</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 hand-checked quality keeps projects moving forward with friendly support. Our free shipping gives customers coming back 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-fill" aria-hidden="true"></i></span> 
  <p class="small mb-0">The new hand-checked quality keeps projects moving forward with friendly support. Our free shipping gives customers coming back 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.

Our secure checkout brings every detail in view on any device. The new easy exchanges brings complex tasks into simple steps without the usual hassle.

Maya Hughes

Frontend Engineer

<div class="clearfix border rounded-3 p-3">
  <p class="small">Our secure checkout brings every detail in view on any device. The new easy exchanges brings complex tasks into simple steps without the usual hassle.</p>
  <div class="float-end text-end">
    <div class="fst-italic">
      Maya Hughes
    </div>
    <div class="small text-body-secondary">
      Frontend Engineer
    </div>
  </div>
</div>

15Sidebar box floated

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

A flexible workflow brings data easy to understand for teams of every size. A clear launch makes data easy to understand without extra tools. This simple release makes data easy to understand with friendly support. This simple workflow shows results you can measure on any device. A friendly dashboard helps you focused on what matters in just a few clicks.

<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 2000
    </div>
    <div>
      Singapore
    </div>
    <div>
      230 staff
    </div>
  </aside>
  <p class="mb-0">A flexible workflow brings data easy to understand for teams of every size. A clear launch makes data easy to understand without extra tools. This simple release makes data easy to understand with friendly support. This simple workflow shows results you can measure on any device. A friendly dashboard helps you focused on what matters in just a few clicks.</p>
</div>

16Badge floated on a title

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

On hold

30-day returns

Dec 17, 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">
    30-day returns
  </div>
  <div class="small text-body-secondary">
    Dec 17, 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.

Quality goods delivered to your door

A smart launch turns time back in your day with friendly support.

<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">
    Quality goods delivered to your door
  </div>
  <div class="small">
    A smart launch turns time back in your day with friendly support.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1The new secure payments helps complex tasks into simple steps without extra tools.
2Our gift wrapping connects every detail in view in just a few clicks.
3The new easy exchanges keeps projects moving forward with friendly support.

<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 secure payments helps 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 gift wrapping connects every detail in view in just a few clicks.</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>The new easy exchanges keeps projects moving forward with friendly support.</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>