Clipboard
Bootstrap 5 Clipboard
Copy to clipboard feature for the latest Bootstrap 5. Let your users easily copy text or links with one click.
Note: Read the API tab to find all available options and advanced customization
Basic example
By adding button with class name clipboard
and
data-mdb-target
attribute you can easily make your text copyable.
Copy from element
There is no difference if element is an input
or just div
element.
Copy from data attribute
By adding to target of copying data-mdb-clipboard-text
you can set text to copy
insted of text from text content.
Clipboard - API
Usage
Via data attributes
<button class="btn btn-primary clipboard" data-mdb-clipboard-target="#copy-target">
Copy
</button>
Via JavaScript
var myClipboard = new mdb.Clipboard(document.getElementById('clipboard'), options)
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$('.example-class').clipboard(options);
Options
Name | Type | Default | Description |
---|---|---|---|
clipboardTarget
|
Null / String | 'null' |
Points an element from which you will copy text. |
Methods
Name | Description | Example |
---|---|---|
dispose
|
Manually deletes an instance of clipboard |
myClipboard.dispose()
|
getInstance
|
Static method which allows you to get the clipboard instance associated to a DOM element. |
Clipboard.getInstance(myClipboardEl)
|
var myClipboardEl = document.getElementById('myClipboard')
var clipboard = new mdb.Clipboard(myClipboardEl)
clipboard.dispose()
Events
Name | Description |
---|---|
copy.mdb.clipboard
|
This event fires immediately after copying text. |
var myClipboardEl = document.getElementById('myClipboard')
myClipboardEl.addEventListener('copy.mdb.clipboard', function (e) {
// do something...
})
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import { Clipboard } from 'mdb-ui-kit';