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> We keep things simple, so you can focus on what matters to you.
  <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-6.svg" class="rounded me-2" width="20" height="20" alt="Ethan Quinn"><strong class="me-auto">Ethan Quinn</strong><small class="text-body-secondary">1 days ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Teams report saving around five hours a week after the first month.
  </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">Real-time dashboards show what is on track and what needs attention.</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">Friendly people answer your questions quickly, by phone, chat or email.</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">Chloe Mensah
  <button type="button" class="btn-close" aria-label="Remove Chloe Mensah"></button>
  </span><span class="ca-chip">Freya Moreau
  <button type="button" class="btn-close" aria-label="Remove Freya Moreau"></button>
  </span><span class="ca-chip">Ethan Silva
  <button type="button" class="btn-close" aria-label="Remove Ethan Silva"></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>Plan projects, track progress and share updates without another status meeting.</p>
  </div>
</div>

<div class="d-flex flex-wrap gap-3">
  <div class="position-relative">
    <img src="https://images.unsplash.com/photo-1690264421892-46e3af5c3455?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-1522202176988-66273c2fd55f?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-1690264459911-6d68c747d8a7?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> looking-back-at-a-busy-season.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> the-real-cost-of-switching-between-tools.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> what-our-customers-asked-us-most.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">
    Every detail is handled by people who care about getting it right.
  </div>
</div>

<div class="d-flex align-items-center gap-3 border rounded p-2" style="max-width: 420px;">
  <img src="../assets/img/product-6.svg" alt="Automation pack" class="rounded" width="56" height="56">
  <div class="flex-grow-1">
    <div class="fw-semibold small">
      Automation pack
    </div>
    <div class="small text-body-secondary">
      Qty 1 &middot; $15.00
    </div>
  </div>
  <button type="button" class="btn-close" aria-label="Remove Automation pack 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>Onboarding guides and live chat help new colleagues get going on day one.</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">Marketing
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Marketing 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">Kyoto
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Kyoto 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>37% 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">A beginner&#39;s guide to getting started</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">Our open API and ready-made integrations fit into the stack you already have. We listen first, then build a plan around what you actually need.</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>