This is default card example. Once you fill the form and hit on generate button you will see below data.
Scroll to see more...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Gallery</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Body css */
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
/* Custom styling for hr element */
hr {
border: none;
height: 2px;
background-color: #ccc;
margin: 20px 0;
}
$(document).ready(function () {
// Add a click event listener to all elements with the class "myButton"
$('.copyCode').click(function () {
// Inside here, "this" refers to the clicked button
$(this).text("Copied"); // Change the text of the clicked button
var clickedButton = $(this); // Save a reference to the clicked button
// Reset the text after 5 seconds
setTimeout(function () {
clickedButton.text("Copy");
}, 5000); // 5000 milliseconds = 5 seconds
});
});
In this example, all buttons with the class "copyCode" will have a click event listener attached to them. When a button is clicked, its text will change to "Copied!", and then after 5 seconds, it will reset back to "Copy".