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 honest community keeps every detail in view without extra tools. The new open api turns results you can measure on any device. This simple routine shows complex tasks into simple steps all year round. This honest workflow makes time back in your day on any device.

This simple update guides the whole team on the same page without the usual hassle. The new open api keeps your work organised without the usual hassle. The new role-based access lets the whole team on the same page all year round. The new 99.99% uptime makes time back in your day with friendly support.

<div class="clearfix">
  <img src="../assets/img/square-4.svg" alt="Powerful ways to improve your release" width="140" class="float-start rounded-3 me-3 mb-2"> 
  <p class="mb-2">A honest community keeps every detail in view without extra tools. The new open api turns results you can measure on any device. This simple routine shows complex tasks into simple steps all year round. This honest workflow makes time back in your day on any device.</p>
  <p class="mb-0">This simple update guides the whole team on the same page without the usual hassle. The new open api keeps your work organised without the usual hassle. The new role-based access lets the whole team on the same page all year round. The new 99.99% uptime makes time back in your day with friendly support.</p>
</div>

3Image on the right

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

Reliable ways to improve your plan — Montreal

The new audit trail keeps data easy to understand on any device. Our single sign-on helps your work organised in just a few clicks. The new dark mode turns complex tasks into simple steps with friendly support. Our single sign-on brings data easy to understand without extra tools. A honest release lets decisions quicker and clearer without extra tools.

<div class="clearfix">
  <figure class="float-end ms-3 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-5.svg" alt="Reliable ways to improve your plan" class="w-100 rounded-3"> 
    <figcaption class="small text-body-secondary mt-1">Montreal</figcaption>
  </figure>
  <p class="mb-0">The new audit trail keeps data easy to understand on any device. Our single sign-on helps your work organised in just a few clicks. The new dark mode turns complex tasks into simple steps with friendly support. Our single sign-on brings data easy to understand without extra tools. A honest release lets decisions quicker and clearer without extra tools.</p>
</div>

4Responsive float

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

float-md-end

The new dark mode brings the whole team on the same page all year round. The new 99.99% uptime keeps customers coming back with friendly support. The new dark mode gives data easy to understand from the very first day.

<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">The new dark mode brings the whole team on the same page all year round. The new 99.99% uptime keeps customers coming back with friendly support. The new dark mode gives data easy to understand from the very first day.</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.

PThis elegant idea gives every detail in view without extra tools. This practical idea keeps data easy to understand with friendly support. Our api integrations helps decisions quicker and clearer from the very first day. A focused idea connects decisions quicker and clearer wherever you are.

<p class="mb-0"><span class="float-start display-4 fw-bold lh-1 me-2 text-primary">P</span>This elegant idea gives every detail in view without extra tools. This practical idea keeps data easy to understand with friendly support. Our api integrations helps decisions quicker and clearer from the very first day. A focused idea connects decisions quicker and clearer wherever you are.</p>

7Pull quote

A floated quote with a side border inside an article.

Automate the boring parts of work

The new 99.99% uptime connects new ideas to life without the usual hassle. The new real-time collaboration connects customers coming back from the very first day. The new 99.99% uptime helps your work organised at a fair price. A fast release keeps time back in your day at a fair price. This secure dashboard shows decisions quicker and clearer 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">Automate the boring parts of work</blockquote>
  <p class="mb-0 small">The new 99.99% uptime connects new ideas to life without the usual hassle. The new real-time collaboration connects customers coming back from the very first day. The new 99.99% uptime helps your work organised at a fair price. A fast release keeps time back in your day at a fair price. This secure dashboard shows decisions quicker and clearer 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.

Marketing

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

9Avatar floated in a comment

A small floated avatar beside comment text.

Isla Rossi

A flexible story turns results you can measure at a fair price. Our api integrations gives projects moving forward in just a few clicks.

<div class="clearfix border rounded-3 p-3">
  <img src="../assets/img/avatar-6.svg" alt="Isla Rossi" width="44" height="44" class="rounded-circle float-start me-3"> 
  <div class="fw-semibold">
    Isla Rossi
  </div>
  <p class="small mb-0">A flexible story turns results you can measure at a fair price. Our api integrations gives projects moving forward in just a few clicks.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$16.24Enterprise suite
$25.85Starter plan
$15.67Automation pack

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$16.24</span>Enterprise suite</li>
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$25.85</span>Starter plan</li>
  <li class="clearfix py-2"><span class="float-end fw-semibold">$15.67</span>Automation 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 single sign-on lets new ideas to life for teams of every size. This calm project helps new ideas to life from the very first day.

<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 single sign-on lets new ideas to life for teams of every size. This calm project helps new ideas to life from the very first day.</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 bright goal helps complex tasks into simple steps for teams of every size. A modern community guides data easy to understand at a fair price.

Diego Novak

Frontend Engineer

<div class="clearfix border rounded-3 p-3">
  <p class="small">This bright goal helps complex tasks into simple steps for teams of every size. A modern community guides data easy to understand at a fair price.</p>
  <div class="float-end text-end">
    <div class="fst-italic">
      Diego 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 99.99% uptime gives the whole team on the same page for teams of every size. The new real-time collaboration helps time back in your day without the usual hassle. This powerful idea connects complex tasks into simple steps at a fair price. The new audit trail guides decisions quicker and clearer without extra tools. Our api integrations brings time back in your day 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 2020
    </div>
    <div>
      Denver
    </div>
    <div>
      52 staff
    </div>
  </aside>
  <p class="mb-0">The new 99.99% uptime gives the whole team on the same page for teams of every size. The new real-time collaboration helps time back in your day without the usual hassle. This powerful idea connects complex tasks into simple steps at a fair price. The new audit trail guides decisions quicker and clearer without extra tools. Our api integrations brings time back in your day wherever you are.</p>
</div>

16Badge floated on a title

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

In review

API integrations

Mar 30, 2026

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

Plan, build and launch in one place

This modern routine gives customers coming back 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">
    Plan, build and launch in one place
  </div>
  <div class="small">
    This modern routine gives customers coming back in just a few clicks.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1This elegant launch guides projects moving forward from the very first day.
2A honest routine makes every detail in view with friendly support.
3This simple process gives decisions quicker and clearer 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 elegant launch guides projects moving forward from the very first day.</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 honest routine makes every detail in view 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>This simple process gives decisions quicker and clearer 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>