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-fill" aria-hidden="true"></i> The new easy exchanges brings results you can measure from the very first day.
  <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-1.svg" class="rounded me-2" width="20" height="20" alt="Diego Novak"><strong class="me-auto">Diego Novak</strong><small class="text-body-secondary">3 min ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Our free shipping helps your work organised wherever you are.
  </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">Our 30-day returns shows your work organised at a fair price.</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-fill" aria-hidden="true"></i> Quick tip</h6>
    <p class="card-text small mb-0">Our free shipping lets every detail in view from the very first day.</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">Liam Morgan
  <button type="button" class="btn-close" aria-label="Remove Liam Morgan"></button>
  </span><span class="ca-chip">Noah Kowalski
  <button type="button" class="btn-close" aria-label="Remove Noah Kowalski"></button>
  </span><span class="ca-chip">Diego Okafor
  <button type="button" class="btn-close" aria-label="Remove Diego Okafor"></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-fill" 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 smart update gives you focused on what matters with friendly support.</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> a-guide-to-free-shipping.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> a-guide-to-30-day-returns.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> idea-notes-for-shoppers.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="update" 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 smart workflow keeps every detail in view on any device.
  </div>
</div>

<div class="d-flex align-items-center gap-3 border rounded p-2" style="max-width: 420px;">
  <img src="../assets/img/product-4.svg" alt="Ceramic mug" class="rounded" width="56" height="56">
  <div class="flex-grow-1">
    <div class="fw-semibold small">
      Ceramic mug
    </div>
    <div class="small text-body-secondary">
      Qty 1 &middot; $261.99
    </div>
  </div>
  <button type="button" class="btn-close" aria-label="Remove Ceramic mug 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>Our gift wrapping shows every detail in view for teams of every size.</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">Beauty
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Beauty 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">Denver
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Denver 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>36% 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">Friendly ways to improve your team</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 friendly journey gives decisions quicker and clearer in just a few clicks. The new carbon-neutral delivery brings the whole team on the same page wherever you are.</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>