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

Required ES init: Clipboard *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

By adding button with data-mdb-clipboard-init and data-mdb-target attributes you can easily make your text copyable.

Show code

Copy from element

There is no distinction, whether the element is an input or simply a div element.

Here is text to copy!
Show code

Copy from data attribute

By adding data-mdb-clipboard-text to the copying target, you can specify the text to be copied, overriding the text from the targeted element.

Copy text from data-mdb-attr instead of text content.
Show code

Feedback example

Listen for copied.mdb.clipboard event to perform actions, such as displaying feedback message to users.

Show code