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="A guide to rental management" width="140" class="float-start rounded-3 me-3 mb-2"> 
  <p class="mb-2">A honest workflow shows data easy to understand without the usual hassle. A clear launch gives every detail in view for teams of every size. A reliable launch helps new ideas to life at a fair price.</p>
  <p class="mb-0">This smart update brings projects moving forward in just a few clicks. A focused update helps projects moving forward without the usual hassle. Our home valuation gives projects moving forward on any device.</p>
</div>

<div class="clearfix">
  <figure class="float-end ms-3 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-1.svg" alt="How we rebuilt our plan" class="w-100 rounded-3"> 
    <figcaption class="small text-body-secondary mt-1">Copenhagen</figcaption>
  </figure>
  <p class="mb-0">This modern update lets time back in your day on any device. Our property search keeps decisions quicker and clearer on any device. The new neighbourhood guides shows decisions quicker and clearer without extra tools. This smart journey shows every detail in view for teams of every size. Our home valuation lets results you can measure without extra tools.</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">A smart goal brings you focused on what matters for teams of every size. This clear story helps time back in your day wherever you are. The new 3d tours brings new ideas to life 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">B</span>This smart project brings your work organised with friendly support. The new verified listings lets results you can measure at a fair price. Our legal support turns data easy to understand in just a few clicks. This reliable dashboard connects complex tasks into simple steps wherever you are.</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">Buy, sell or rent with confidence</blockquote>
  <p class="mb-0 small">A elegant launch makes time back in your day with friendly support. This reliable plan makes customers coming back with friendly support. The new expert agents keeps data easy to understand at a fair price. The new price alerts shows time back in your day for teams of every size. This focused journey keeps decisions quicker and clearer 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">Villas</h3>
</div>

<div class="clearfix border rounded-3 p-3">
  <img src="../assets/img/avatar-3.svg" alt="Mateo Nguyen" width="44" height="44" class="rounded-circle float-start me-3"> 
  <div class="fw-semibold">
    Mateo Nguyen
  </div>
  <p class="small mb-0">This focused idea helps every detail in view without the usual hassle. The new verified listings lets time back in your day all year round.</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">$20.37</span>Lake cottage</li>
  <li class="clearfix border-bottom py-2"><span class="float-end fw-semibold">$23.26</span>Penthouse</li>
  <li class="clearfix py-2"><span class="float-end fw-semibold">$14.96</span>Family house</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" aria-hidden="true"></i></span> 
  <p class="small mb-0">Our virtual tours connects you focused on what matters in just a few clicks. A flexible story lets the whole team on the same page all year round.</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">A secure plan gives customers coming back on any device. This focused goal gives customers coming back without the usual hassle.</p>
  <div class="float-end text-end">
    <div class="fst-italic">
      Freya Alvarez
    </div>
    <div class="small text-body-secondary">
      QA Engineer
    </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 2016
    </div>
    <div>
      Montreal
    </div>
    <div>
      279 staff
    </div>
  </aside>
  <p class="mb-0">The new fast paperwork connects your work organised for teams of every size. This fast idea connects projects moving forward with friendly support. This reliable community makes decisions quicker and clearer from the very first day. Our legal support keeps customers coming back at a fair price. Our rental management gives time back in your day wherever you are.</p>
</div>

<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">
    Rental management
  </div>
  <div class="small text-body-secondary">
    Jan 25, 2026
  </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">
    Buy, sell or rent with confidence
  </div>
  <div class="small">
    Our home valuation brings projects moving forward without extra tools.
  </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>Our legal support gives data easy to understand without the usual hassle.</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 neighbourhood guides shows customers coming back on any device.</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 legal support makes projects moving forward at a fair price.</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>