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-ui-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> Our loyalty rewards helps complex tasks into simple steps at a fair price.
  <button type="button" class="btn-close" data-ui-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-2.svg" class="rounded me-2" width="20" height="20" alt="Elena Ashford"><strong class="me-auto">Elena Ashford</strong><small class="text-body-secondary">16 hours ago</small>
    <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    The new carbon-neutral delivery brings your work organised for teams of every size.
  </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">This friendly update shows every detail in view with friendly support.</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">The new secure payments guides you focused on what matters wherever you are.</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">Finn Ibrahim
  <button type="button" class="btn-close" aria-label="Remove Finn Ibrahim"></button>
  </span><span class="ca-chip">Luna Mensah
  <button type="button" class="btn-close" aria-label="Remove Luna Mensah"></button>
  </span><span class="ca-chip">Mason Ibrahim
  <button type="button" class="btn-close" aria-label="Remove Mason Ibrahim"></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-ui-toggle="offcanvas" data-ui-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-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>The new easy exchanges shows your work organised 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> inside-the-secure-routine.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> reliable-ways-to-improve-your-story.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> journey-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="goal" 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 powerful project guides every detail in view without the usual hassle.
  </div>
</div>

<div class="d-flex align-items-center gap-3 border rounded p-2" style="max-width: 420px;">
  <img src="../assets/img/product-3.svg" alt="Running cap" class="rounded" width="56" height="56">
  <div class="flex-grow-1">
    <div class="fw-semibold small">
      Running cap
    </div>
    <div class="small text-body-secondary">
      Qty 1 &middot; $448.99
    </div>
  </div>
  <button type="button" class="btn-close" aria-label="Remove Running cap 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-ui-theme="dark">
    <span>This powerful dashboard lets decisions quicker and clearer with friendly support.</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-ui-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">Home
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Home 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">Seoul
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Seoul 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-ui-theme="dark">
  <i class="bi bi-stars" aria-hidden="true"></i> <strong>28% off</strong> all yearly plans this week. <a href="#" class="alert-link">Claim offer</a>
  <button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
</div>

<button type="button" class="btn btn-primary" data-ui-toggle="modal" data-ui-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">4 lessons from our community</h5>
        <button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">Our secure checkout shows results you can measure with friendly support. This friendly team makes new ideas to life all year round.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Got it</button>
      </div>
    </div>
  </div>
</div>