Bootstrap 5 copy-to-clipboard patterns using the browser Clipboard API. No external library needed. This page covers 4 patterns — basic inputs, code blocks, share URLs and toast confirmation.
Core API
// Modern Clipboard API (HTTPS required)
async function copyText(text) {
await navigator.clipboard.writeText(text)
// Show success feedback
}
// With fallback for older browsers
function copyWithFallback(text) {
if (navigator.clipboard) {
navigator.clipboard.writeText(text)
} else {
const el = document.createElement('textarea')
el.value = text
document.body.appendChild(el)
el.select()
document.execCommand('copy')
el.remove()
}
}
Key Classes Reference
| Class | What It Does |
|---|---|
input-group | Groups input with copy button |
border-end-0 / border-start-0 | Removes double border between input and button |
position-absolute.top-0.end-0 | Overlays copy button on code block |
transition:all 0.2s | Smooth button state change |
1. Bootstrap 5 Basic Copy Button
Button that copies text and shows a checkmark confirmation for 2 seconds.
2. Bootstrap 5 Copy Code Block
Code block with an overlaid copy button — the standard pattern for documentation sites.
4. Bootstrap 5 Copy with Toast Confirmation
Copy buttons that trigger Bootstrap 5 toast notifications on success.
Frequently Asked Questions
Bootstrap has no built-in clipboard API. Use the browser's Clipboard API: navigator.clipboard.writeText(text).then(() => { /* show success feedback */ }). It's async and returns a Promise. Works in all modern browsers over HTTPS.
The Clipboard API requires HTTPS and modern browsers. For legacy support add a fallback: try { await navigator.clipboard.writeText(text) } catch { const el = document.createElement('textarea'); el.value = text; document.body.appendChild(el); el.select(); document.execCommand('copy'); el.remove(); }.
Add a CSS class on the button after copying: btn.classList.add('copied'). Define .copied styles: background green, text white. After 2 seconds remove the class: setTimeout(() => btn.classList.remove('copied'), 2000). Or show a Bootstrap Toast for a more polished notification.
Position the copy button absolute within a relative container over the pre element. On click get the text content: document.getElementById('preElement').textContent. Pass to navigator.clipboard.writeText(). Show success feedback on the button itself.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.