"Text copy paste"
Bootstrap 4.1.1 Snippet by imsachin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <!--Deal Sections--> <section class="container-fluid landing-page-part"> <div class="row"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <h3 class="mr0"> <strong>Copy Paste Code </strong> </h3> <div class="hotel-rate-block1"> <div class="row"> <div class="col-md-10 col-md-offset-1 col-xs-12"> <div class="row"> <div class="col-md-6 border"> <span class="text-left off"> Get up to </span> <span class="pull-right text-right"> <a href="#" title="off" class="off colb"><strong>18 Off<sup>*</sup></strong></a> </span> </div> <div class="col-md-6 col-xs-12"> <span class="text-left pull-left off right"> Code:</span> <div class="pull-right copyCode"> <input class="off colo" onclick="myFunction(this)" type="text" value="SS" id="SS" data-toggle="popover" data-content="Successfully copied to the clipboard." readonly> <img src="images/cuter.png" class="cuter" alt="cut" /> <div class="sucMsg" style="display: none;"> Successfully copied to the clipboard. </div> </div> </div> </div> </div> </div> <div class="row mrT10 text-center"> <div class="col-md-12"> code valid on. </div> </div> </div> </div> </div> </div> </div> </section> <script> function myFunction(item) { var copyText = document.getElementById(item.id); copyText.select(); document.execCommand("copy"); //alert("Successfully copied to the clipboard."); } $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> </body> </html>
/*Promo-codes*/ .hotel-rate-block1 {background-color: #fff; padding: 15px 5px 12px 5px;margin-bottom: 25px;box-shadow: 0px 0px 12px #e4e4e4;} .promo{width: 100%;float: left;} .off{font-size:16px;} .padd{padding-right:19px;} .right{float:right;} .colb{color:#143ca1;} .colo1{color:#fa7603;border:1px dashed #23527c;} .border{border-right:1px dashed #ccc;} .colo{border: 1px dashed #017959; width: 70px;text-align: center;cursor: pointer;color: #fa7603;font-weight: 800;} .colo:focus{outline:none;} .cuter {position: absolute;right: -10px;top: -8px;} .copyCode {position:relative;} .copyCode .arrow {display:none;} .copyCode .popover-content {position: absolute; left: -150px; top: 15px; width: 140px; padding: 5px 8px; font-size: 12px; color: #fff; background-color: #000; border-radius: 5px; z-index: 9; -moz-animation: hideCode 0s ease-in 3s forwards; /* Firefox */ -webkit-animation: hideCode 0s ease-in 3s forwards; /* Safari and Chrome */ -o-animation: hideCode 0s ease-in 3s forwards; /* Opera */ animation: hideCode 0s ease-in 3s forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes hideCode { to { width:0; height:0; visibility:hidden; } } @-webkit-keyframes hideCode { to { width:0; height:0; visibility:hidden; } }

Related: See More

Awesome Landing Page
Bootstrap Images to Left and Right with Text and Heading
Creating password field text hide show via a single class
JS Typewriter (Text Animation)

Questions / Comments: