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.

Edit in sandbox 
        
            
        <div class="form-outline">
          <input type="text" id="copy-target" class="form-control" />
          <label class="form-label" for="copy-target">Type here text to copy</label>
        </div>
        <button class="btn btn-primary clipboard" data-mdb-clipboard-target="#copy-target">
          Copy
        </button>

Copy from element

There is no difference if element is an input or just div element.

Here is text to copy!
Edit in sandbox 
        
            
        <button class="btn btn-primary clipboard" data-mdb-clipboard-target="#copy-target-2">
          Copy
        </button>
        <div id="copy-target-2" class="mt-2">Here is text to copy!</div>

Copy from data attribute

By adding to target of copying data-mdb-clipboard-text you can set text to copy instead of text from text content.

Copy text from data-mdb-attr instead of text content.
Edit in sandbox 
        
            
        <button class="btn btn-primary clipboard" data-mdb-clipboard-target="#copy-target-3">
          Copy
        </button>
        <div id="copy-target-3" data-mdb-clipboard-text="This text is from data-mdb-attr!" class="mt-2">
          Copy text from data-mdb-attr despite of text content.
        </div>

Feedback example

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

Edit in sandbox 
        
            
    <div
     class="alert fade mt-5"
     id="container-example"
     role="alert"
     data-mdb-color="primary"
     data-mdb-hidden="true"
     data-mdb-autohide="true"
     data-mdb-delay="4000"
     data-mdb-position="top-right"
     data-mdb-width="25%"
  >
    Text copied!
  </div>

  <div class="form-outline">
    <input type="text" id="copy-targe-4" class="form-control" />
    <label class="form-label" for="copy-target-4">Type here text to copy</label>
  </div>
  <button id="myExample" class="btn btn-primary clipboard" data-mdb-clipboard-target="#copy-target-4">
    Copy
  </button>
        
        
    
        
            
 const myExample = document.querySelector('#myExample');
 const alertInstance = mdb.Alert.getInstance(document.querySelector('#container-example'));

 myExample.addEventListener('copy.mdb.clipboard', ()=> {
   myExample.innerText = 'COPIED!'
   alertInstance.show()
   setTimeout(() => {
     myExample.innerText = 'COPY'
   }, 4000);
 })

Clipboard - API

Usage

Via data attributes

Edit in sandbox 
        
            
        <button class="btn btn-primary clipboard" data-mdb-clipboard-target="#copy-target">
          Copy
        </button>

Via JavaScript

Edit in sandbox 
        
            
        const 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.

Edit in sandbox 
        
            
          $(document).ready(() => {
            $('.example-class').clipboard(options);
          });

Options

Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-clipboard-target="".

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)
getOrCreateInstance Static method which returns the clipboard instance associated to a DOM element or create a new one in case it wasn't initialized. Clipboard.getOrCreateInstance(myClipboardEl)
Edit in sandbox 
        
            
        const myClipboardEl = document.getElementById('myClipboard') 
        const clipboard = new mdb.Clipboard(myClipboardEl)
        clipboard.dispose()

Events

Name Description
copy.mdb.clipboard This event fires immediately after copying text.
Edit in sandbox 
        
            
        const 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:

Edit in sandbox 
        
            
      import { Clipboard } from 'mdb-ui-kit';