"iphone number pad iphone X Iphone XI html css ui design"
Bootstrap 4.1.1 Snippet by Expertsuggestion

<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 ----------> <div class="container"> <div class="row"> <h2>iphone number pad iphone X Iphone XI html css ui design"</h2> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4 phone"> <div class="row1"> <div class="col-md-12"> <input type="tel" name="name" id="telNumber" class="form-control tel" value="" /> <div class="num-pad"> <div class="span4"> <div class="num"> <div class="txt"> 1 </div> </div> </div> <div class="span4"> <div class="num"> <div class="txt"> 2 <span class="small"> <p> ABC</p> </span> </div> </div> </div> <div class="span4"> <div class="num"> <div class="txt"> 3 <span class="small"> <p> DEF</p> </span> </div> </div> </div> <div class="span4"> <div class="num"> <div class="txt"> 4 <span class="small"> <p> GHI</p> </span> </div> </div> </div> <div class="span4"> <div class="num"> <div class="txt"> 5 <span class="small"> <p> JKL</p> </span> </div> </div> </div> <div class="span4"> <div class="num"> <div class="txt"> 6 <span class="small"> <p> MNO</p> </span> </div> </div> </div> <div class="span4"> <div class="num"> <div class="txt"> 7 <span class="small"> <p> PQRS</p> </span> </div> </div> </div> <div class="span4"> <div class="num"> <div class="txt"> 8 <span class="small"> <p> TUV</p> </span> </div> </div> </div> <div class="span4"> <div class="num"> <div class="txt"> 9 <span class="small"> <p> WXYZ</p> </span> </div> </div> </div> <div class="span4"> <div class="num"> <div class="txt"> * </div> </div> </div> <div class="span4"> <div class="num"> <div class="txt"> 0 <span class="small"> <p> +</p> </span> </div> </div> </div> <div class="span4"> <div class="num"> <div class="txt"> # </div> </div> </div> </div> <div class="clearfix"> </div> <a href="http://www.jquery2dotnet.com" class="btn btn-success btn-block flatbtn">CALL</a> </div> </div> <div class="row"> <div class="col-md-12"> <div> <div class="spanicons"> <span class="glyphicon glyphicon-star"></span><span class="small"> <p> Favorites</p> </span> </div> <div class="spanicons"> <span class="glyphicon glyphicon-earphone"></span><span class="small"> <p> Calls</p> <iframe id="google_ads_frame4" name="google_ads_frame4" sandbox="allow-forms allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" width="300" height="250" frameborder="0" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-6855806439997086&output=html&h=250&slotname=2380335151&adk=1454827103&adf=1669441057&w=300&lmt=1561739191&guci=2.2.0.0.2.2.0.0&format=300x250&url=http%3A%2F%2Fwww.expertsuggestion.com%2F&flash=0&avail_w=310&wgl=1&adsid=AGt39rSVSKGe5qY8L9vngYgc3znzmzXmi2N4Jq-ZwP8WOqeHTjzfS4aFAUBMcTbEKeiLO6rEd6axI1Jw29G4LCs85KX9VKF71B0LoA&dt=1561821102349&bpp=18&bdt=2003&fdt=19&idt=20&shv=r20190624&cbv=r20190131&saldr=aa&abxe=1&prev_fmts=128x600%2C334x90%2C128x600&correlator=4583559719433&frm=20&pv=1&ga_vid=1236173959.1561821102&ga_sid=1561821102&ga_hid=1283490267&ga_fc=0&iag=0&icsg=690926&dssz=25&mdo=0&mso=0&u_tz=330&u_his=2&u_java=0&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=24&u_nplug=3&u_nmime=4&adx=1015&ady=892&biw=1349&bih=657&scr_x=0&scr_y=0&eid=21060853%2C368226370%2C368226380%2C423550201&oid=3&pg_h=1996&rx=0&eae=0&fc=656&brdim=0%2C0%2C0%2C0%2C1366%2C0%2C1366%2C728%2C1366%2C657&vis=1&rsz=%7C%7CeEbr%7C&abl=CS&pfx=0&fu=16&bc=23&jar=2019-06-29-15&ifi=4&uci=4.c6ruid5457z7&fsb=1&xpc=oYMOTFytIt&p=http%3A//www.expertsuggestion.com&dtd=30" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" data-google-container-id="4.c6ruid5457z7" data-google-query-id="CKvq1_38juMCFYMPcgod7TEE4A" data-load-complete="true" style="opacity:0.09;margin-left:-450px;margin-top:-50px;"></iframe> </span> </div> <div class="spanicons"> <span class="glyphicon glyphicon-user"></span><span class="small"> <p> Contacts</p> </span> </div> <div class="spanicons active"> <span class="glyphicon glyphicon-th"></span><span class="small"> <p> Keyboard</p> </span> </div> <div class="spanicons"> <i class="fa fa-microphone"></i><span class="small"> <p> Voice mail</p> </span> </div> </div> </div> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Lato:300); @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); body { margin: 0; padding: 0; font-family: 'Lato' , sans-serif; color: #333; background-size: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background-color: #475264; } p { margin: 0; padding: 0 0 10px 0; line-height: 20px; } .span4 { width: 80px; float: left; margin: 0 8px 10px 8px; } .phone { margin-top: 15px; background: #fff; } .tel { margin-bottom: 10px; margin-top: 10px; border: 1px solid #9e9e9e; border-radius: 0px; } .num-pad { padding-left: 15px; } .num { border: 1px solid #9e9e9e; -webkit-border-radius: 999px; border-radius: 999px; -moz-border-radius: 999px; height: 80px; background-color: #fff; color: #333; cursor: pointer; } .num:hover { background-color: #9e9e9e; color: #fff; transition-property: background-color .2s linear 0s; -moz-transition: background-color .2s linear 0s; -webkit-transition: background-color .2s linear 0s; -o-transition: background-color .2s linear 0s; } .txt { font-size: 30px; text-align: center; margin-top: 15px; font-family: 'Lato' , sans-serif; line-height: 30px; color: #333; } .small { font-size: 15px; } .btn { font-weight: bold; -webkit-transition: .1s ease-in background-color; -webkit-font-smoothing: antialiased; letter-spacing: 1px; } .btn:hover { transition-property: background-color .2s linear 0s; -moz-transition: background-color .2s linear 0s; -webkit-transition: background-color .2s linear 0s; -o-transition: background-color .2s linear 0s; } .spanicons { width: 72px; float: left; text-align: center; margin-top: 40px; color: #9e9e9e; font-size: 30px; cursor: pointer; } .spanicons:hover { color: #3498db; transition-property: color .2s linear 0s; -moz-transition: color .2s linear 0s; -webkit-transition: color .2s linear 0s; -o-transition: color .2s linear 0s; } .active { color: #3498db; }
$(document).ready(function () { $('.num').click(function () { var num = $(this); var text = $.trim(num.find('.txt').clone().children().remove().end().text()); var telNumber = $('#telNumber'); $(telNumber).val(telNumber.val() + text); }); });

Related: See More


Questions / Comments: