Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Warning: Use of undefined constant MDB_PAYPAL_WEBHOOK_ID - assumed 'MDB_PAYPAL_WEBHOOK_ID' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/paypal/class-mdb-paypal-webhook.php on line 23

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Bootstrap Clipboard - examples & tutorial

Clipboard MDB Pro component

Bootstrap 5 Clipboard

Clipboard provides easy to use copy method from input fields or from any element you want.

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.

Here is text to copy!

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.

Copy text from data-mdb-attr instead of 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()

        var myClipboardEl = document.getElementById('myClipboard') 
        var clipboard = new mdb.Modal(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';