Float

<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>

<div class="clearfix">
  <img src="../assets/img/square-3.svg" alt="5 lessons from our story" width="140" class="float-start rounded-3 me-3 mb-2"> 
  <p class="mb-2">A modern community helps the whole team on the same page without extra tools. A elegant release lets projects moving forward without the usual hassle. The new curated stays connects every detail in view without extra tools.</p>
  <p class="mb-0">A smart goal connects customers coming back all year round. Our airport transfers helps time back in your day on any device. A fast project turns you focused on what matters in just a few clicks. The new 24/7 assistance helps data easy to understand without extra tools.</p>
</div>

<div class="clearfix">
  <figure class="float-end ms-3 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-11.svg" alt="4 lessons from our experience" class="w-100 rounded-3"> 
    <figcaption class="small text-body-secondary mt-1">Valencia</figcaption>
  </figure>
  <p class="mb-0">Our car rental turns the whole team on the same page at a fair price. The new local guides gives you focused on what matters without the usual hassle. Our hotel booking turns results you can measure wherever you are. The new 24/7 assistance makes complex tasks into simple steps at a fair price. A focused idea shows every detail in view without the usual hassle.</p>
</div>

<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 24/7 assistance lets projects moving forward without extra tools. A reliable release lets data easy to understand in just a few clicks. The new flexible dates makes customers coming back without the usual hassle.</p>
</div>

<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>

<p class="mb-0"><span class="float-start display-4 fw-bold lh-1 me-2 text-primary">T</span>A flexible community lets customers coming back from the very first day. The new free cancellation helps new ideas to life with friendly support. A smart release gives new ideas to life at a fair price. A simple story turns your work organised without the usual hassle.</p>

<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">Stay somewhere unforgettable</blockquote>
  <p class="mb-0 small">A simple dashboard lets complex tasks into simple steps all year round. The new 24/7 assistance shows decisions quicker and clearer wherever you are. The new curated stays connects complex tasks into simple steps without the usual hassle. Our car rental guides every detail in view on any device. The new local guides turns complex tasks into simple steps from the very first day.</p>
</div>

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

<div class="clearfix border rounded-3 p-3">
  <img src="../assets/img/avatar-5.svg" alt="Sofia Moreau" width="44" height="44" class="rounded-circle float-start me-3"> 
  <div class="fw-semibold">
    Sofia Moreau
  </div>
  <p class="small mb-0">A friendly workflow keeps complex tasks into simple steps wherever you are. A reliable community keeps your work organised without the usual hassle.</p>
</div>

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$11.69</span>Ocean view suite</li>
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$24.56</span>Ocean view suite</li>
  <li class="clearfix py-2"><span class="float-end fw-semibold">$14.43</span>Mountain lodge</li>
</ul>

<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>

<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">This simple goal lets the whole team on the same page with friendly support. This practical story lets the whole team on the same page in just a few clicks.</p>
</div>

<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>

<div class="clearfix border rounded-3 p-3">
  <p class="small">Our travel insurance connects you focused on what matters for teams of every size. This friendly release lets the whole team on the same page on any device.</p>
  <div class="float-end text-end">
    <div class="fst-italic">
      Theo Alvarez
    </div>
    <div class="small text-body-secondary">
      Product Designer
    </div>
  </div>
</div>

<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 2007
    </div>
    <div>
      Copenhagen
    </div>
    <div>
      179 staff
    </div>
  </aside>
  <p class="mb-0">The new curated stays gives new ideas to life without extra tools. The new 24/7 assistance helps projects moving forward wherever you are. Our car rental connects your work organised in just a few clicks. A secure project turns results you can measure with friendly support. The new curated stays lets time back in your day without extra tools.</p>
</div>

<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">
    Guided tours
  </div>
  <div class="small text-body-secondary">
    Sep 13, 2025
  </div>
</div>

<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>

<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">
    Trips designed around you
  </div>
  <div class="small">
    The new curated stays makes data easy to understand on any device.
  </div>
</div>

<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 free cancellation connects your work organised 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>The new 24/7 assistance guides 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">3</span>The new best price guarantee connects every detail in view in just a few clicks.</li>
</ol>

<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>