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-startfloat-end<div class="clearfix bg-surface-3 rounded-lg p-2">
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center float-start">
<code class="small">float-start</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md 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.
More than eighty speakers share what they have learned the hard way. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. The networking app helps you meet the right people before you arrive.
Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Our evening party is the best place to turn talks into friendships.
<div class="clearfix">
<img src="https://images.unsplash.com/photo-1773829020694-413e879d2957?auto=format&fit=crop&w=800&h=800&q=70" alt="What we learned from last year's feedback" width="140" class="float-start rounded-lg me-4 mb-2">
<p class="mb-2">More than eighty speakers share what they have learned the hard way. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. The networking app helps you meet the right people before you arrive.</p>
<p class="mb-0">Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Our evening party is the best place to turn talks into friendships.</p>
</div>3Image on the right
float-end with ms-3 puts the figure on the right of the text.
Virtual passes let you join the main stage live from anywhere. Every attendee receives a certificate of participation. Group tickets include a private meeting room for your team. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.
<div class="clearfix">
<figure class="float-end ms-4 mb-2 text-center" style="width:150px">
<img src="https://images.unsplash.com/photo-1560523159-fbe43c0b465f?auto=format&fit=crop&w=1200&h=800&q=70" alt="Five things we learned this year" class="w-full rounded-lg">
<figcaption class="small text-muted mt-1">Denver</figcaption>
</figure>
<p class="mb-0">Virtual passes let you join the main stage live from anywhere. Every attendee receives a certificate of participation. Group tickets include a private meeting room for your team. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>4Responsive float
float-md-end floats only from md; on phones the box stays in the normal flow.
Workshops are limited to thirty seats, so everyone gets hands-on time. Clear prices, honest advice and no surprises along the way. Three days of keynotes, hands-on workshops and evening meetups.
<div class="clearfix border rounded-lg p-4">
<div class="md:float-end md:ms-4 mb-2 bg-warning-subtle text-warning-emphasis rounded-lg p-2 small">
float-md-end
</div>
<p class="mb-0 small">Workshops are limited to thirty seats, so everyone gets hands-on time. Clear prices, honest advice and no surprises along the way. Three days of keynotes, hands-on workshops and evening meetups.</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-surface-3 rounded-lg p-2">
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center float-end sm:float-none">
<code class="small">float-end float-sm-none</code>
</div>
</div>6Drop cap
A large floated first letter starts a story.
JGroup tickets include a private meeting room for your team. Our team has done this many times, so you never have to guess. The networking app helps you meet the right people before you arrive. Our evening party is the best place to turn talks into friendships.
<p class="mb-0"><span class="float-start display-4 font-bold leading-none me-2 text-primary-ink">J</span>Group tickets include a private meeting room for your team. Our team has done this many times, so you never have to guess. The networking app helps you meet the right people before you arrive. Our evening party is the best place to turn talks into friendships.</p>7Pull quote
A floated quote with a side border inside an article.
Three days that change how you work
We listen first, then build a plan around what you actually need. Thousands of attendees already trust us, and we work hard to keep it that way. Early bird tickets save you up to forty percent until the end of the month. Start in minutes and get help from a real person whenever you need it. Every attendee receives a certificate of participation.
<div class="clearfix">
<blockquote class="float-end ms-4 mb-2 border-s border-4 border-primary ps-4 text-lg italic" style="max-width:14rem">Three days that change how you work</blockquote>
<p class="mb-0 small">We listen first, then build a plan around what you actually need. Thousands of attendees already trust us, and we work hard to keep it that way. Early bird tickets save you up to forty percent until the end of the month. Start in minutes and get help from a real person whenever you need it. Every attendee receives a certificate of participation.</p>
</div>8Floated buttons in a header
A heading with a float-end button; clearfix keeps the border below both.
Webinar
<div class="clearfix border-b 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">Webinar</h3>
</div>9Avatar floated in a comment
A small floated avatar beside comment text.
Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.
<div class="clearfix border rounded-lg p-4">
<img src="../assets/img/avatar-2.svg" alt="Noah Delgado" width="44" height="44" class="rounded-full float-start me-4">
<div class="font-semibold">
Noah Delgado
</div>
<p class="small mb-0">Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.</p>
</div>10Price floated right
Menu rows with the price floated to the end.
- $11.61Evening meetup
- $22.86Recording pass
- $16.30Recording pass
<ul class="list-unstyled mb-0" style="max-width:24rem">
<li class="clearfix border-b py-2"><span class="float-end font-semibold">$11.61</span>Evening meetup</li>
<li class="clearfix border-b py-2"><span class="float-end font-semibold">$22.86</span>Recording pass</li>
<li class="clearfix py-2"><span class="float-end font-semibold">$16.30</span>Recording pass</li>
</ul>11Without clearfix
Without clearfix the parent collapses; with it the background wraps the floats.
floatfloat<div class="row g-2">
<div class="col-sm-6">
<div class="bg-danger-subtle rounded-lg p-1 small">
no clearfix
<div class="bg-primary-subtle border border-primary/30 rounded-md 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-lg p-1 small">
clearfix
<div class="bg-primary-subtle border border-primary/30 rounded-md 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 venue is a short walk from the station and fully accessible. Every session is recorded, so you can catch up on anything you missed.
<div class="clearfix bg-info-subtle text-info-emphasis rounded-lg p-4">
<span class="float-start text-3xl leading-none me-4"><i class="bi bi-info-circle-fill" aria-hidden="true"></i></span>
<p class="small mb-0">The venue is a short walk from the station and fully accessible. Every session is recorded, so you can catch up on anything you missed.</p>
</div>13Gallery of floated tiles
Floated tiles with margins form a simple wrapping gallery.
<div class="clearfix">
<img src="https://images.unsplash.com/photo-1770097286213-6d6fc60f4cdf?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery 1" width="90" height="90" class="float-start me-2 mb-2 rounded-lg object-cover"> <img src="https://images.unsplash.com/photo-1774094453087-0207a0cd2309?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery 2" width="90" height="90" class="float-start me-2 mb-2 rounded-lg object-cover"> <img src="https://images.unsplash.com/photo-1773828755374-0ee802d9f44b?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery 3" width="90" height="90" class="float-start me-2 mb-2 rounded-lg object-cover"> <img src="https://images.unsplash.com/photo-1773829020694-413e879d2957?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery 4" width="90" height="90" class="float-start me-2 mb-2 rounded-lg object-cover">
</div>14Signature block
float-end with text-end places a signature at the bottom right of a letter.
More than eighty speakers share what they have learned the hard way. Friendly people answer your questions quickly, by phone, chat or email.
<div class="clearfix border rounded-lg p-4">
<p class="small">More than eighty speakers share what they have learned the hard way. Friendly people answer your questions quickly, by phone, chat or email.</p>
<div class="float-end text-end">
<div class="italic">
Ethan Morgan
</div>
<div class="small text-muted">
Content Writer
</div>
</div>
</div>15Sidebar box floated
A fact box floated to the end of an article on md and up.
Workshops are limited to thirty seats, so everyone gets hands-on time. Sponsors meet decision-makers in a relaxed, friendly setting. We measure success by how many attendees come back and tell their friends. Virtual passes let you join the main stage live from anywhere. Start in minutes and get help from a real person whenever you need it.
<div class="clearfix">
<aside class="md:float-end md:ms-4 mb-4 border rounded-lg p-4 bg-surface-3 small" style="max-width:14rem">
<div class="font-semibold mb-1">
Quick facts
</div>
<div>
Founded 2002
</div>
<div>
Barcelona
</div>
<div>
190 staff
</div>
</aside>
<p class="mb-0">Workshops are limited to thirty seats, so everyone gets hands-on time. Sponsors meet decision-makers in a relaxed, friendly setting. We measure success by how many attendees come back and tell their friends. Virtual passes let you join the main stage live from anywhere. Start in minutes and get help from a real person whenever you need it.</p>
</div>16Badge floated on a title
A small badge floated to the end of a card title.
<div class="border rounded-lg p-4" style="max-width:22rem">
<span class="badge text-bg-success float-end">On hold</span>
<div class="font-semibold">
Live streaming
</div>
<div class="small text-muted">
Sep 15, 2025
</div>
</div>17Two floated columns
Two w-50 boxes, one float-start and one float-end, fill a row.
float-start w-50float-end w-50<div class="clearfix">
<div class="float-start w-1/2 pe-1">
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center">
<code class="small">float-start w-50</code>
</div>
</div>
<div class="float-end w-1/2 ps-1">
<div class="bg-primary-subtle border border-primary/30 rounded-md 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.
<div class="border rounded-lg p-4 bg-surface-3">
<button type="button" class="btn-close float-end" aria-label="Close"></button>
<div class="font-semibold">
Experiences people talk about
</div>
<div class="small">
Virtual passes let you join the main stage live from anywhere.
</div>
</div>19Step number floated
A circle number floated beside each instruction.
- 1Our evening party is the best place to turn talks into friendships.
- 2Our team has done this many times, so you never have to guess.
- 3We keep things simple, so you can focus on what matters to you.
<ol class="list-unstyled mb-0 grid gap-2">
<li class="clearfix"><span class="float-start me-2 text-bg-primary rounded-full text-center small font-bold" style="width:26px;height:26px;line-height:26px">1</span>Our evening party is the best place to turn talks into friendships.</li>
<li class="clearfix"><span class="float-start me-2 text-bg-primary rounded-full text-center small font-bold" style="width:26px;height:26px;line-height:26px">2</span>Our team has done this many times, so you never have to guess.</li>
<li class="clearfix"><span class="float-start me-2 text-bg-primary rounded-full text-center small font-bold" style="width:26px;height:26px;line-height:26px">3</span>We keep things simple, so you can focus on what matters to you.</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-surface-3 rounded-lg p-2">
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center sm:float-start md:float-end lg:float-none">
<code class="small">sm start, md end, lg none</code>
</div>
</div>