Bootstrap 5 Copy to Clipboard
Bootstrap 5 does not ship a built-in copy-to-clipboard component, but the pattern is commonly built using a combination of Bootstrap button classes, optional tooltip or popover feedback, and a small JavaScript snippet using the Clipboard API. It is used wherever users need to quickly capture a value without selecting text manually, such as API keys, referral links, or code snippets. Keeping the interaction lightweight and providing visible confirmation (button label change, tooltip) is essential for usability.
Primary Class
.copy-to-clipboardCommon Use Cases
- →Copying a generated API key or secret token from a dashboard settings page so developers can paste it directly into their environment configuration
- →Copying a personalised referral link from an affiliate or rewards page so users can share it via messaging apps without manual selection
- →Copying a shareable URL for a specific chart, report, or filtered view inside a SaaS analytics dashboard
- →Copying a pre-formatted code snippet from a documentation page so readers can paste it into their terminal or editor without reformatting
Variants & Classes
| Variant | Description |
|---|---|
| Copy to Clipboard Default | Standard copy to clipboard with Bootstrap's default styling. |
| Copy to Clipboard Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<div class="mb-3">
<label for="apiKeyInput" class="form-label fw-semibold">Your API Key</label>
<div class="input-group">
<input
type="text"
id="apiKeyInput"
class="form-control font-monospace"
value="sk-live-4f92b1d8e3a07c65f2190d4b"
readonly
aria-label="API Key"
/>
<button
class="btn btn-outline-secondary"
type="button"
id="copyBtn"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Copy to clipboard"
onclick="copyApiKey()"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg>
<span id="copyLabel" class="ms-1">Copy</span>
</button>
</div>
<div class="form-text">Keep this key private. Do not share it in public repositories.</div>
</div>
<script>
// Initialise Bootstrap tooltips
const tooltipEl = document.getElementById('copyBtn');
const tooltip = new bootstrap.Tooltip(tooltipEl);
function copyApiKey() {
const input = document.getElementById('apiKeyInput');
navigator.clipboard.writeText(input.value).then(() => {
const label = document.getElementById('copyLabel');
label.textContent = 'Copied!';
tooltipEl.setAttribute('data-bs-original-title', 'Copied!');
tooltip.show();
setTimeout(() => {
label.textContent = 'Copy';
tooltipEl.setAttribute('data-bs-original-title', 'Copy to clipboard');
tooltip.hide();
}, 2000);
});
}
</script>Live Examples
Basic Copy to Clipboard
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated copy to clipboard with custom colours
- ✓Copy to Clipboard with interactive states
- ✓Responsive copy to clipboard for all screen sizes
Best Practices
Always provide visible confirmation after copying
Change the button label or icon for 1.5 to 2 seconds after a successful copy. Users have no other way to know the clipboard was updated, and silent interactions erode trust in the interface.
Use navigator.clipboard, not document.execCommand
The modern Clipboard API (navigator.clipboard.writeText) is promise-based, works in all current browsers, and does not require a visible selected element. The deprecated execCommand('copy') approach can fail silently in certain browser security contexts.
Mark the input as readonly, not disabled
A readonly input is still selectable and its value is included in form submissions, whereas a disabled input is excluded. Using readonly also allows keyboard users to tab to the field and read the value with a screen reader.
Handle clipboard permission errors gracefully
Wrap your clipboard call in a try/catch or .catch() handler and show a fallback message such as 'Press Ctrl+C to copy' if the permission is denied, which can happen in iframes or older mobile browsers.