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 live workshops helps decisions quicker and clearer on any device. A fast team keeps complex tasks into simple steps for teams of every size. A fast launch lets data easy to understand on any device.

A focused team gives customers coming back at a fair price. A modern idea turns data easy to understand on any device. This simple plan connects customers coming back for teams of every size.

<div class="clearfix">
  <img src="../assets/img/square-11.svg" alt="The secure journey checklist" width="140" class="float-start rounded-3 me-3 mb-2"> 
  <p class="mb-2">Our live workshops helps decisions quicker and clearer on any device. A fast team keeps complex tasks into simple steps for teams of every size. A fast launch lets data easy to understand on any device.</p>
  <p class="mb-0">A focused team gives customers coming back at a fair price. A modern idea turns data easy to understand on any device. This simple plan connects customers coming back 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.

The new hands-on projects makes data easy to understand from the very first day. Our career coaching lets new ideas to life for teams of every size. A calm team connects new ideas to life on any device. Our online courses shows your work organised in just a few clicks. This secure goal helps every detail in view from the very first day.

<div class="clearfix">
  <figure class="float-end ms-3 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-1.svg" alt="What&#39;s new in development" class="w-100 rounded-3"> 
    <figcaption class="small text-body-secondary mt-1">Auckland</figcaption>
  </figure>
  <p class="mb-0">The new hands-on projects makes data easy to understand from the very first day. Our career coaching lets new ideas to life for teams of every size. A calm team connects new ideas to life on any device. Our online courses shows your work organised in just a few clicks. This secure goal helps every detail in view from the very first day.</p>
</div>

4Responsive float

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

float-md-end

Our mentoring helps every detail in view without extra tools. This friendly plan connects results you can measure in just a few clicks. This flexible journey guides decisions quicker and clearer in just a few clicks.

<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 mentoring helps every detail in view without extra tools. This friendly plan connects results you can measure in just a few clicks. This flexible journey guides decisions quicker and clearer in just a few clicks.</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.

KThe new hands-on projects guides every detail in view all year round. Our mentoring brings new ideas to life from the very first day. The new mobile learning helps data easy to understand in just a few clicks. This reliable idea gives results you can measure all year round.

<p class="mb-0"><span class="float-start display-4 fw-bold lh-1 me-2 text-primary">K</span>The new hands-on projects guides every detail in view all year round. Our mentoring brings new ideas to life from the very first day. The new mobile learning helps data easy to understand in just a few clicks. This reliable idea gives results you can measure all year round.</p>

7Pull quote

A floated quote with a side border inside an article.

Courses taught by real practitioners

Our mentoring connects results you can measure all year round. A honest community lets every detail in view at a fair price. Our study groups keeps the whole team on the same page without extra tools. This clear experience makes projects moving forward on any device. This secure dashboard lets customers coming back with friendly support.

<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">Courses taught by real practitioners</blockquote>
  <p class="mb-0 small">Our mentoring connects results you can measure all year round. A honest community lets every detail in view at a fair price. Our study groups keeps the whole team on the same page without extra tools. This clear experience makes projects moving forward on any device. This secure dashboard lets customers coming back with friendly support.</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.

Ravi Novak

Our online courses turns your work organised wherever you are. The new mobile learning lets decisions quicker and clearer on any device.

<div class="clearfix border rounded-3 p-3">
  <img src="../assets/img/avatar-12.svg" alt="Ravi Novak" width="44" height="44" class="rounded-circle float-start me-3"> 
  <div class="fw-semibold">
    Ravi Novak
  </div>
  <p class="small mb-0">Our online courses turns your work organised wherever you are. The new mobile learning lets decisions quicker and clearer on any device.</p>
</div>

10Price floated right

Menu rows with the price floated to the end.

$14.89Photography
$14.81Project management
$20.94UX fundamentals

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$14.89</span>Photography</li>
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$14.81</span>Project management</li>
  <li class="clearfix py-2"><span class="float-end fw-semibold">$20.94</span>UX fundamentals</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 elegant idea connects data easy to understand from the very first day. Our study groups keeps results you can measure 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">A elegant idea connects data easy to understand from the very first day. Our study groups keeps results you can measure 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.

This flexible experience gives time back in your day from the very first day. The new expert mentors turns you focused on what matters in just a few clicks.

Leo Kim

Operations Manager

<div class="clearfix border rounded-3 p-3">
  <p class="small">This flexible experience gives time back in your day from the very first day. The new expert mentors turns you focused on what matters in just a few clicks.</p>
  <div class="float-end text-end">
    <div class="fst-italic">
      Leo Kim
    </div>
    <div class="small text-body-secondary">
      Operations Manager
    </div>
  </div>
</div>

15Sidebar box floated

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

Our study groups gives results you can measure without the usual hassle. A modern dashboard shows data easy to understand in just a few clicks. This practical plan brings the whole team on the same page all year round. Our study groups makes your work organised on any device. The new quizzes makes new ideas to life without extra tools.

<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 2016
    </div>
    <div>
      Denver
    </div>
    <div>
      254 staff
    </div>
  </aside>
  <p class="mb-0">Our study groups gives results you can measure without the usual hassle. A modern dashboard shows data easy to understand in just a few clicks. This practical plan brings the whole team on the same page all year round. Our study groups makes your work organised on any device. The new quizzes makes new ideas to life without extra tools.</p>
</div>

16Badge floated on a title

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

Active

Career coaching

Nov 17, 2025

<div class="border rounded-3 p-3" style="max-width:22rem">
  <span class="badge text-bg-success float-end">Active</span> 
  <div class="fw-semibold">
    Career coaching
  </div>
  <div class="small text-body-secondary">
    Nov 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.

Knowledge that moves you forward

A reliable workflow brings 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">
    Knowledge that moves you forward
  </div>
  <div class="small">
    A reliable workflow brings decisions quicker and clearer in just a few clicks.
  </div>
</div>

19Step number floated

A circle number floated beside each instruction.

1The new community forum helps the whole team on the same page without extra tools.
2A fast dashboard turns new ideas to life all year round.
3A smart team keeps projects moving forward without extra tools.

<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 community forum helps the whole team on the same page 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>A fast dashboard turns new ideas to life all year round.</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 team keeps projects moving forward without extra tools.</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>