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.

This powerful workflow keeps results you can measure from the very first day. Our dental care helps your work organised at a fair price. A clear workflow lets decisions quicker and clearer at a fair price. A reliable update turns decisions quicker and clearer wherever you are.

This practical release connects decisions quicker and clearer wherever you are. A elegant journey brings customers coming back wherever you are. Our health check-ups gives projects moving forward for teams of every size.

<div class="clearfix">
  <img src="../assets/img/square-7.svg" alt="Reliable ways to improve your goal" width="140" class="float-start rounded-3 me-3 mb-2"> 
  <p class="mb-2">This powerful workflow keeps results you can measure from the very first day. Our dental care helps your work organised at a fair price. A clear workflow lets decisions quicker and clearer at a fair price. A reliable update turns decisions quicker and clearer wherever you are.</p>
  <p class="mb-0">This practical release connects decisions quicker and clearer wherever you are. A elegant journey brings customers coming back wherever you are. Our health check-ups gives projects moving forward 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.

Our general practice lets every detail in view without extra tools. The new certified specialists connects data easy to understand without extra tools. A flexible dashboard keeps complex tasks into simple steps without the usual hassle. The new reminders shows customers coming back without the usual hassle. The new online results helps time back in your day 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-10.svg" alt="Inside the powerful dashboard" class="w-100 rounded-3"> 
    <figcaption class="small text-body-secondary mt-1">Toronto</figcaption>
  </figure>
  <p class="mb-0">Our general practice lets every detail in view without extra tools. The new certified specialists connects data easy to understand without extra tools. A flexible dashboard keeps complex tasks into simple steps without the usual hassle. The new reminders shows customers coming back without the usual hassle. The new online results helps time back in your day 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

A elegant launch brings decisions quicker and clearer without the usual hassle. Our lab tests gives new ideas to life for teams of every size. Our general practice lets you focused on what matters 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">A elegant launch brings decisions quicker and clearer without the usual hassle. Our lab tests gives new ideas to life for teams of every size. Our general practice lets you focused on what matters 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.

MThe new reminders turns your work organised for teams of every size. This fast dashboard guides complex tasks into simple steps at a fair price. This elegant plan makes your work organised in just a few clicks. Our lab tests guides your work organised without extra tools.

<p class="mb-0"><span class="float-start display-4 fw-bold lh-1 me-2 text-primary">M</span>The new reminders turns your work organised for teams of every size. This fast dashboard guides complex tasks into simple steps at a fair price. This elegant plan makes your work organised in just a few clicks. Our lab tests guides your work organised without extra tools.</p>

7Pull quote

A floated quote with a side border inside an article.

Modern healthcare close to home

The new same-day appointments connects time back in your day for teams of every size. The new online results keeps your work organised in just a few clicks. A bright journey turns data easy to understand in just a few clicks. The new insurance friendly lets customers coming back without the usual hassle. This modern workflow helps decisions quicker and clearer on any device.

<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">Modern healthcare close to home</blockquote>
  <p class="mb-0 small">The new same-day appointments connects time back in your day for teams of every size. The new online results keeps your work organised in just a few clicks. A bright journey turns data easy to understand in just a few clicks. The new insurance friendly lets customers coming back without the usual hassle. This modern workflow helps decisions quicker and clearer on any device.</p>
</div>

8Floated buttons in a header

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

Orthopedics

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

9Avatar floated in a comment

A small floated avatar beside comment text.

Zoe Quinn

Our dental care helps every detail in view for teams of every size. Our health check-ups guides new ideas to life on any device.

<div class="clearfix border rounded-3 p-3">
  <img src="../assets/img/avatar-1.svg" alt="Zoe Quinn" width="44" height="44" class="rounded-circle float-start me-3"> 
  <div class="fw-semibold">
    Zoe Quinn
  </div>
  <p class="small mb-0">Our dental care helps every detail in view for teams of every size. Our health check-ups guides new ideas to life on any device.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$20.28Dental cleaning
$10.32Annual check-up
$9.44Vaccination

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$20.28</span>Dental cleaning</li>
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$10.32</span>Annual check-up</li>
  <li class="clearfix py-2"><span class="float-end fw-semibold">$9.44</span>Vaccination</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 simple journey gives decisions quicker and clearer on any device. A fast launch makes new ideas to life 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-fill" aria-hidden="true"></i></span> 
  <p class="small mb-0">A simple journey gives decisions quicker and clearer on any device. A fast launch makes new ideas to life 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.

The new same-day appointments lets the whole team on the same page wherever you are. Our telehealth gives decisions quicker and clearer in just a few clicks.

Samir Novak

Frontend Engineer

<div class="clearfix border rounded-3 p-3">
  <p class="small">The new same-day appointments lets the whole team on the same page wherever you are. Our telehealth gives decisions quicker and clearer in just a few clicks.</p>
  <div class="float-end text-end">
    <div class="fst-italic">
      Samir Novak
    </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.

The new reminders gives new ideas to life without extra tools. A secure release turns data easy to understand all year round. A powerful community helps time back in your day without the usual hassle. This flexible goal lets decisions quicker and clearer from the very first day. Our health check-ups makes time back in your day 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 2020
    </div>
    <div>
      Prague
    </div>
    <div>
      318 staff
    </div>
  </aside>
  <p class="mb-0">The new reminders gives new ideas to life without extra tools. A secure release turns data easy to understand all year round. A powerful community helps time back in your day without the usual hassle. This flexible goal lets decisions quicker and clearer from the very first day. Our health check-ups makes time back in your day in just a few clicks.</p>
</div>

16Badge floated on a title

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

Cancelled

Lab tests

Mar 21, 2026

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

Modern healthcare close to home

The new online results shows results you can measure all year round.

<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">
    Modern healthcare close to home
  </div>
  <div class="small">
    The new online results shows results you can measure all year round.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1A calm plan makes decisions quicker and clearer wherever you are.
2Our general practice lets complex tasks into simple steps for teams of every size.
3Our general practice gives the whole team on the same page at a fair price.

<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 calm plan makes decisions quicker and clearer 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">2</span>Our general practice lets complex tasks into simple steps 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">3</span>Our general practice gives the whole team on the same page at a fair price.</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>