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" aria-hidden="true"></i> Start in minutes and get help from a real person whenever you need it.
  <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-9.svg" class="rounded me-2" width="20" height="20" alt="Theo Fischer"><strong class="me-auto">Theo Fischer</strong><small class="text-body-secondary">43 min ago</small>
    <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Thousands of guests already trust us, and we work hard to keep it that way.
  </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">Every detail is handled by people who care about getting it right.</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">Our menu changes with the seasons and the best produce from nearby farms.</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">Maya Rossi
  <button type="button" class="btn-close" aria-label="Remove Maya Rossi"></button>
  </span><span class="ca-chip">Jonah Hughes
  <button type="button" class="btn-close" aria-label="Remove Jonah Hughes"></button>
  </span><span class="ca-chip">Ravi Novak
  <button type="button" class="btn-close" aria-label="Remove Ravi Novak"></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" 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>We listen first, then build a plan around what you actually need.</p>
  </div>
</div>

<div class="d-flex flex-wrap gap-3">
  <div class="position-relative">
    <img src="https://images.unsplash.com/photo-1538333581680-29dd4752ddf2?auto=format&fit=crop&w=800&h=800&q=70" 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="https://images.unsplash.com/photo-1541963020-4f9732b3ee29?auto=format&fit=crop&w=800&h=800&q=70" 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="https://images.unsplash.com/photo-1570560258879-af7f8e1447ac?auto=format&fit=crop&w=800&h=800&q=70" 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-make-our-sourdough-every-morning.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> looking-back-at-a-busy-season.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> our-chef-s-guide-to-seasonal-autumn-produce.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="idea" 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">
    We have been feeding this neighbourhood for over a decade, and we still love it.
  </div>
</div>

<div class="d-flex align-items-center gap-3 border rounded p-2" style="max-width: 420px;">
  <img src="../assets/img/product-7.svg" alt="Burrata with tomatoes" class="rounded" width="56" height="56">
  <div class="flex-grow-1">
    <div class="fw-semibold small">
      Burrata with tomatoes
    </div>
    <div class="small text-body-secondary">
      Qty 1 &middot; $13.00
    </div>
  </div>
  <button type="button" class="btn-close" aria-label="Remove Burrata with tomatoes 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>Cooking classes on Saturday mornings teach you our favourite recipes.</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">Desserts
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Desserts 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">Porto
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Porto 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>35% 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">What our guests asked us most</h5>
        <button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">Children are always welcome, with a menu made just for them. Our terrace is open from spring to autumn, with heaters for cooler evenings.</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>