Close Button

<button type="button" class="btn-close" aria-label="Close"></button>

<div class="d-flex gap-3 align-items-center">
  <button type="button" class="btn-close" aria-label="Close"></button>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
</div>

<div data-bs-theme="dark" class="bg-dark p-3 rounded d-flex gap-3">
  <button type="button" class="btn-close" aria-label="Close"></button>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
</div>

<div class="alert alert-info alert-dismissible fade show mb-0" role="alert">
  <i class="bi bi-info-circle" aria-hidden="true"></i> A clear journey keeps the whole team on the same page at a fair price.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div id="toast-901" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="../assets/img/avatar-4.svg" class="rounded me-2" width="20" height="20" alt="Priya Moreau"><strong class="me-auto">Priya Moreau</strong><small class="text-body-secondary">yesterday</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    The new price alerts shows decisions quicker and clearer from the very first day.
  </div>
</div>
<button type="button" class="btn btn-outline-secondary btn-sm mt-2" data-demo-toast="#toast-901">Show toast again</button>

<div class="modal position-static d-block" tabindex="-1" aria-labelledby="modal-title-902">
  <div class="modal-dialog m-0">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-title-902">Rename file</h5>
        <button type="button" class="btn-close" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">The new neighbourhood guides turns your work organised from the very first day.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light border">Cancel</button>
        <button type="button" class="btn btn-primary">Rename</button>
      </div>
    </div>
  </div>
</div>

<div class="card position-relative" style="max-width: 22rem;">
  <div class="card-body pe-5">
    <h6 class="card-title"><i class="bi bi-lightbulb" aria-hidden="true"></i> Quick tip</h6>
    <p class="card-text small mb-0">This friendly story brings the whole team on the same page on any device.</p>
  </div>
  <button type="button" class="btn-close position-absolute top-0 end-0 m-2" aria-label="Dismiss tip"></button>
</div>

<div class="d-flex flex-wrap gap-2">
  <span class="ca-chip">Sofia Quinn
  <button type="button" class="btn-close" aria-label="Remove Sofia Quinn"></button>
  </span><span class="ca-chip">Leo Lindqvist
  <button type="button" class="btn-close" aria-label="Remove Leo Lindqvist"></button>
  </span><span class="ca-chip">Maya Lindqvist
  <button type="button" class="btn-close" aria-label="Remove Maya Lindqvist"></button>
  </span>
</div>

<div class="d-flex gap-4 align-items-center">
  <button type="button" class="btn-close ca-close-sm" aria-label="Close small"></button>
  <button type="button" class="btn-close" aria-label="Close"></button>
  <button type="button" class="btn-close ca-close-lg" aria-label="Close large"></button>
</div>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-903" aria-controls="offcanvas-903"><i class="bi bi-funnel" aria-hidden="true"></i> Open filters</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-903" aria-labelledby="offcanvas-label-904">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title" id="offcanvas-label-904">Filters</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>A powerful update turns projects moving forward without extra tools.</p>
  </div>
</div>

<div class="d-flex flex-wrap gap-3">
  <div class="position-relative">
    <img src="../assets/img/square-3.svg" alt="Upload 1" class="rounded border" width="96" height="96">
    <button type="button" class="btn-close bg-white rounded-circle p-1 position-absolute top-0 end-0 m-1 shadow-sm" style="font-size: .6rem;" aria-label="Remove image 1"></button>
  </div>
  <div class="position-relative">
    <img src="../assets/img/square-4.svg" alt="Upload 2" class="rounded border" width="96" height="96">
    <button type="button" class="btn-close bg-white rounded-circle p-1 position-absolute top-0 end-0 m-1 shadow-sm" style="font-size: .6rem;" aria-label="Remove image 2"></button>
  </div>
  <div class="position-relative">
    <img src="../assets/img/square-5.svg" alt="Upload 3" class="rounded border" width="96" height="96">
    <button type="button" class="btn-close bg-white rounded-circle p-1 position-absolute top-0 end-0 m-1 shadow-sm" style="font-size: .6rem;" aria-label="Remove image 3"></button>
  </div>
</div>

<ul class="list-group" style="max-width: 380px;">
  <li class="list-group-item d-flex justify-content-between align-items-center"><span><i class="bi bi-paperclip" aria-hidden="true"></i> how-we-rebuilt-our-dashboard.pdf</span><button type="button" class="btn-close" aria-label="Remove attachment"></button></li>
  <li class="list-group-item d-flex justify-content-between align-items-center"><span><i class="bi bi-paperclip" aria-hidden="true"></i> what-s-new-in-land.png</span><button type="button" class="btn-close" aria-label="Remove attachment"></button></li>
  <li class="list-group-item d-flex justify-content-between align-items-center"><span><i class="bi bi-paperclip" aria-hidden="true"></i> reliable-ways-to-improve-your-project.pdf</span><button type="button" class="btn-close" aria-label="Remove attachment"></button></li>
</ul>

<div class="input-group" style="max-width: 360px;">
  <span class="input-group-text bg-transparent"><i class="bi bi-search" aria-hidden="true"></i></span><input type="search" class="form-control border-start-0 border-end-0" id="clear-search-905" value="community" aria-label="Search"><span class="input-group-text bg-transparent">
  <button type="button" class="btn-close" aria-label="Clear search"></button>
  </span>
</div>

<div class="border rounded shadow-sm" style="max-width: 360px;">
  <div class="d-flex align-items-center gap-2 p-3 border-bottom">
    <strong class="me-auto">Notifications</strong><a href="#" class="small">Mark all read</a>
    <button type="button" class="btn-close" aria-label="Close notifications"></button>
  </div>
  <div class="p-3 small text-body-secondary">
    A secure update helps time back in your day for teams of every size.
  </div>
</div>

<div class="d-flex align-items-center gap-3 border rounded p-2" style="max-width: 420px;">
  <img src="../assets/img/product-11.svg" alt="Garden villa" class="rounded" width="56" height="56">
  <div class="flex-grow-1">
    <div class="fw-semibold small">
      Garden villa
    </div>
    <div class="small text-body-secondary">
      Qty 1 &middot; $472.99
    </div>
  </div>
  <button type="button" class="btn-close" aria-label="Remove Garden villa from cart"></button>
</div>

<div class="d-flex flex-column gap-2">
  <div class="text-bg-primary rounded p-3 d-flex justify-content-between" data-bs-theme="dark">
    <span>The new expert agents brings time back in your day from the very first day.</span>
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
  <div class="text-bg-success rounded p-3 d-flex justify-content-between" data-bs-theme="dark">
    <span>Payment received.</span>
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
</div>

<button type="button" class="btn btn-light border d-inline-flex align-items-center gap-2"><span class="btn-close" style="font-size: .65rem;" aria-hidden="true"></span> Close</button>

<div class="d-flex flex-wrap align-items-center gap-2">
  <span class="small text-body-secondary me-1">Active filters:</span><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis d-inline-flex align-items-center gap-2 py-2 px-3 fw-normal">Land
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Land filter"></button>
  </span><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis d-inline-flex align-items-center gap-2 py-2 px-3 fw-normal">Rating 4+
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Rating 4+ filter"></button>
  </span><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis d-inline-flex align-items-center gap-2 py-2 px-3 fw-normal">Free shipping
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Free shipping filter"></button>
  </span><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis d-inline-flex align-items-center gap-2 py-2 px-3 fw-normal">Edinburgh
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Edinburgh filter"></button>
  </span><a href="#" class="small ms-1">Clear all</a>
</div>

<div class="alert alert-dismissible fade show rounded-0 border-0 text-center mb-0 ca-promo" role="alert" data-bs-theme="dark">
  <i class="bi bi-stars" aria-hidden="true"></i> <strong>26% off</strong> all yearly plans this week. <a href="#" class="alert-link">Claim offer</a>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-906">Open dialog</button>
<div class="modal fade" id="modal-906" tabindex="-1" aria-labelledby="modal-title-907" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-title-907">The calm goal checklist</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">A modern process helps projects moving forward for teams of every size. Our rental management lets results you can measure without extra tools.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Got it</button>
      </div>
    </div>
  </div>
</div>