The close button is a small, accessible "x" for dismissing alerts, toasts, modals, offcanvas panels, chips and list items. Always set an aria-label, use data-bs-dismiss to close Bootstrap components, and place it on dark surfaces with data-bs-theme="dark".
1Basic close button
A plain .btn-close; always give it an aria-label.
<button type="button" class="btn-close" aria-label="Close"></button>2Disabled
The disabled attribute fades the button and blocks clicks.
<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>3On dark backgrounds
Inside data-bs-theme="dark" the icon turns white automatically.
<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>4In an alert
data-bs-dismiss="alert" removes the alert when the close button is clicked.
Try the first lesson of any course for free before you decide.
<div class="alert alert-info alert-dismissible fade show mb-0" role="alert">
<i class="bi bi-info-circle" aria-hidden="true"></i> Try the first lesson of any course for free before you decide.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>5In a toast
The close button in a toast header uses data-bs-dismiss="toast"; the button below shows it again.
Freya Haddad2 days agoEvery detail is handled by people who care about getting it right.
<div id="toast-901" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="../assets/img/avatar-7.svg" class="rounded me-2" width="20" height="20" alt="Freya Haddad"><strong class="me-auto">Freya Haddad</strong><small class="text-body-secondary">2 days ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Every detail is handled by people who care about getting it right.
</div>
</div>
<button type="button" class="btn btn-outline-secondary btn-sm mt-2" data-demo-toast="#toast-901">Show toast again</button>6In a modal header
A static modal preview: the close button sits at the end of the header.
<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">We measure success by how many students come back and tell their friends.</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>7Card corner
Positioned in the top-right corner of a card to dismiss a tip.
Quick tip
Learn on your schedule, with lessons that fit into a lunch break.
<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">Learn on your schedule, with lessons that fit into a lunch break.</p>
</div>
<button type="button" class="btn-close position-absolute top-0 end-0 m-2" aria-label="Dismiss tip"></button>
</div>8Chips with close
Small close buttons inside chips remove a selected value.
Nadia CarterRuby MoreauIsla Ashford
<div class="d-flex flex-wrap gap-2">
<span class="ca-chip">Nadia Carter
<button type="button" class="btn-close" aria-label="Remove Nadia Carter"></button>
</span><span class="ca-chip">Ruby Moreau
<button type="button" class="btn-close" aria-label="Remove Ruby Moreau"></button>
</span><span class="ca-chip">Isla Ashford
<button type="button" class="btn-close" aria-label="Remove Isla Ashford"></button>
</span>
</div>9Sizes
Scale the button with font-size; it is built from an em-sized background icon.
<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>10In an offcanvas
The close button in an offcanvas header uses data-bs-dismiss="offcanvas".
Filters
Mentors review your projects and give feedback within two days.
<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>Mentors review your projects and give feedback within two days.</p>
</div>
</div>11Remove uploaded images
Small round close buttons on thumbnails in an upload preview.
<div class="d-flex flex-wrap gap-3">
<div class="position-relative">
<img src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?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-1620829813573-7c9e1877706f?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-1752650736024-d6aac18abc2d?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>12Remove list items
A close button at the end of each list item, e.g. email attachments.
- headlines-people-actually-click.pdf
- looking-back-at-a-busy-season.png
- tips-for-learning-while-working-full-time.pdf
<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> headlines-people-actually-click.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> tips-for-learning-while-working-full-time.pdf</span><button type="button" class="btn-close" aria-label="Remove attachment"></button></li>
</ul>13Clear a search field
A close button inside an input group clears the search.
<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="plan" aria-label="Search"><span class="input-group-text bg-transparent">
<button type="button" class="btn-close" aria-label="Clear search"></button>
</span>
</div>14Notification panel header
A panel title with a mark-all link and a close button.
NotificationsMark all read
Thousands of students already trust us, and we work hard to keep it that way.
<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">
Thousands of students already trust us, and we work hard to keep it that way.
</div>
</div>15Cart item remove
A close button removes a product row from the mini cart.
Copywriting
Qty 1 · $84.00
<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="Copywriting" class="rounded" width="56" height="56">
<div class="flex-grow-1">
<div class="fw-semibold small">
Copywriting
</div>
<div class="small text-body-secondary">
Qty 1 · $84.00
</div>
</div>
<button type="button" class="btn-close" aria-label="Remove Copywriting from cart"></button>
</div>16On coloured surfaces
On primary, success or danger backgrounds use a dark theme wrapper so the icon stays visible.
Earn a certificate at the end of each course and share it with employers.
Payment received.
<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>Earn a certificate at the end of each course and share it with employers.</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>17Close with a label
When space allows, pair the icon with a visible word for clarity.
<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>18Filter chips row
A row of active filters, each removable, with a clear-all link.
<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">Lifestyle
<button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Lifestyle 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">Austin
<button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Austin filter"></button>
</span><a href="#" class="small ms-1">Clear all</a>
</div>19Promo banner
A full-width dismissible banner at the top of a page.
16% off all yearly plans this week. Claim offer
<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>16% 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>20Modal with close buttons
A real modal: the header close button and the footer button both use data-bs-dismiss="modal".
<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">How to learn a new skill in 30 days</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">Guided learning paths take you from beginner to job-ready step by step. 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>