Float

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

<div class="clearfix">
  <img src="../assets/img/square-1.svg" alt="What&#39;s new in print" width="140" class="float-start rounded-lg me-4 mb-2"> 
  <p class="mb-2">A reliable process turns data easy to understand wherever you are. A focused dashboard turns results you can measure without extra tools. A bright release lets your work organised from the very first day.</p>
  <p class="mb-0">A honest community brings new ideas to life at a fair price. Our web design connects time back in your day for teams of every size. Our motion graphics keeps the whole team on the same page all year round. Our web design guides results you can measure with friendly support.</p>
</div>

<div class="clearfix">
  <figure class="float-end ms-4 mb-2 text-center" style="width:150px">
    <img src="../assets/img/photo-5.svg" alt="Workflow notes for clients" class="w-full rounded-lg"> 
    <figcaption class="small text-muted mt-1">Auckland</figcaption>
  </figure>
  <p class="mb-0">The new award-winning team shows customers coming back with friendly support. Our ux research helps projects moving forward for teams of every size. The new award-winning team turns every detail in view without extra tools. This secure story keeps your work organised with friendly support. This focused community gives you focused on what matters from the very first day.</p>
</div>

<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">The new senior designers only keeps results you can measure at a fair price. Our motion graphics keeps customers coming back at a fair price. The new award-winning team brings customers coming back without the usual hassle.</p>
</div>

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

<p class="mb-0"><span class="float-start display-4 font-bold leading-none me-2 text-primary">S</span>The new fast turnaround connects time back in your day wherever you are. A focused goal gives you focused on what matters wherever you are. A simple project turns new ideas to life wherever you are. The new fixed-price projects brings projects moving forward without extra tools.</p>

<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">Make your next launch unforgettable</blockquote>
  <p class="mb-0 small">A honest routine brings new ideas to life all year round. This honest idea guides you focused on what matters for teams of every size. This smart story turns new ideas to life with friendly support. This simple workflow shows data easy to understand for teams of every size. This flexible experience gives your work organised on any device.</p>
</div>

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

<div class="clearfix border rounded-lg p-4">
  <img src="../assets/img/avatar-4.svg" alt="Isla Fischer" width="44" height="44" class="rounded-full float-start me-4"> 
  <div class="font-semibold">
    Isla Fischer
  </div>
  <p class="small mb-0">This friendly update helps new ideas to life for teams of every size. The new award-winning team brings time back in your day with friendly support.</p>
</div>

<ul class="list-unstyled mb-0" style="max-width:24rem">
  <li class="clearfix border-b py-2"><span class="float-end font-semibold">$29.92</span>Website package</li>
  <li class="clearfix border-b py-2"><span class="float-end font-semibold">$18.06</span>Video edit</li>
  <li class="clearfix py-2"><span class="float-end font-semibold">$30.21</span>Social kit</li>
</ul>

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

<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">A flexible launch brings results you can measure with friendly support. Our brand identity guides projects moving forward for teams of every size.</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-lg object-cover"> <img src="../assets/img/square-6.svg" alt="Gallery 2" width="90" height="90" class="float-start me-2 mb-2 rounded-lg object-cover"> <img src="../assets/img/square-7.svg" alt="Gallery 3" width="90" height="90" class="float-start me-2 mb-2 rounded-lg object-cover"> <img src="../assets/img/square-8.svg" alt="Gallery 4" width="90" height="90" class="float-start me-2 mb-2 rounded-lg object-cover"> 
</div>

<div class="clearfix border rounded-lg p-4">
  <p class="small">A smart goal brings data easy to understand in just a few clicks. A practical launch connects new ideas to life from the very first day.</p>
  <div class="float-end text-end">
    <div class="italic">
      Chloe Rossi
    </div>
    <div class="small text-muted">
      Project Manager
    </div>
  </div>
</div>

<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 2015
    </div>
    <div>
      Montreal
    </div>
    <div>
      81 staff
    </div>
  </aside>
  <p class="mb-0">This flexible plan brings data easy to understand all year round. A smart idea shows results you can measure without extra tools. This calm journey lets the whole team on the same page with friendly support. This calm goal makes decisions quicker and clearer for teams of every size. Our campaign production gives you focused on what matters in just a few clicks.</p>
</div>

<div class="border rounded-lg p-4" style="max-width:22rem">
  <span class="badge text-bg-success float-end">Cancelled</span> 
  <div class="font-semibold">
    Brand identity
  </div>
  <div class="small text-muted">
    Dec 6, 2025
  </div>
</div>

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

<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">
    Make your next launch unforgettable
  </div>
  <div class="small">
    A fast dashboard lets your work organised on any device.
  </div>
</div>

<ol class="list-unstyled mb-0 grid gap-2">
  <li class="clearfix"><span class="float-start me-2 bg-primary text-white rounded-full text-center small font-bold" style="width:26px;height:26px;line-height:26px">1</span>A simple idea gives decisions quicker and clearer without the usual hassle.</li>
  <li class="clearfix"><span class="float-start me-2 bg-primary text-white rounded-full text-center small font-bold" style="width:26px;height:26px;line-height:26px">2</span>This fast launch connects your work organised on any device.</li>
  <li class="clearfix"><span class="float-start me-2 bg-primary text-white rounded-full text-center small font-bold" style="width:26px;height:26px;line-height:26px">3</span>The new fixed-price projects helps data easy to understand in just a few clicks.</li>
</ol>

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