copy text on click bootstrap
Sure! Here's an example of how you can copy text on click using Bootstrap:
<!DOCTYPE html>
<html>
<head>
<title>Copy Text on Click</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Click to Copy Text</h1>
<button id="copyButton" class="btn btn-primary" data-clipboard-target="#textToCopy">Copy</button>
<p id="textToCopy">This is the text that will be copied when the button is clicked.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('#copyButton');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
In the above example, we're using Bootstrap to create a button and a paragraph element. The data-clipboard-target attribute is set to the ID of the element that contains the text we want to copy. When the button is clicked, the JavaScript code using the Clipboard.js library copies the text to the clipboard.
Note: Make sure to include the necessary CSS and JavaScript files from Bootstrap and Clipboard.js for this example to work properly.