"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/shivapandey/pen/jmpqjq?depth=everything&order=popularity&page=81&q=movie&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'> <style class="cp-pen-styles">body { background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); height:100vh; } #app { width: 320px; height:600px; background: #fff; margin:auto; margin-top:10%; box-shadow: 2px 2px 9px 5px rgba(0,0,0,0.1); } #header { height:60px; padding-top:15px; background: #fff; } #slider { height:135px; background: #f4f6f9; } #feature { height:150px; background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); } #burger-icon { padding-left: 20px; font-size:19px; color:#999; cursor:pointer; } #brand-name { font-size:19px; letter-spacing:1.17px; color: #777; } #bell-symb { float:right; padding-right:20px; color:#999; cursor:pointer; } .brand-alt { color: #AA91D4; } #price-section { color:#999; padding-top:30px; padding-left:20px; } #price { color:#333; font-size:26px; font-family: 'Roboto' } #price-details { margin-top:8px; } #avatar { float:left; } #avatar>img { width:35px; height:35px; border-radius:50%; } #price-info { font-size:13px; margin-left:40px; padding-top:1px; letter-spacing:0.4px; color:#777 } #price-time { font-size:11px; margin-left:40px; } .no-pading-left { padding-left: 0; } #payment-button-section { margin-top:35px; border-left:1px solid #ccc; padding-left:7px } .btn { border-radius:0; font-size:12px; font-weight:500; text-transform:uppercase; } .btn-primary, .btn-primary:hover { background:#8A60C2; border:none; } .btn-default { color:#777 } #money { color:white; padding-top:34px; font-family: 'Roboto'; padding-left:20px; } #money-title { font-family: 'Roboto-Light'; letter-spacing:0.7px; font-size:17px; } #money-amount { font-size:50px; position:relative; top:-5px; padding-left:20px; font-family: 'Roboto-Light'; } .currency { font-size:19px; position:absolute; top:9px; left:0; } .cbtn { padding-top:10px; padding-right:15px; } .cbtn>li { list-style: none; color:#F6F4FA; text-transform:uppercase; padding-top:15px; padding-bottom:5px; font-family: 'Roboto-Light'; letter-spacing:0.7px; font-size:13px; border-bottom: 1px solid rgba(218, 207, 235, 0.6); } #content { padding:15px; } #content-title { margin-top:10px; font-family: 'Roboto'; letter-spacing:0.5px; } #content-body { display:flex; flex:1; min-height:170px; padding-top:15px; padding-bottom:15px; flex-direction: column; } .content-row { display:flex; flex:1; border-bottom:2px solid #F1F2F7; } .content-col { padding:15px; width:33.33%; text-align:center; border-right:2px solid #F1F2F7; padding-right:17px; font-size:14px; } .content-col:last-child { border-right: none; } .content-row:last-child { border-bottom:none; } .content-col>i { width:100%; font-size:25px; color: #986FCB; margin-bottom:10px; }</style></head><body> <div id="app"> <div id="header"> <div class="row"> <div class="col-sm-4"> <div id="burger-icon"><i class="fa fa-bars"></i></div> </div> <div class="col-sm-4"> <div id="brand-name">Phone<span class="brand-alt">Pay</span></div> </div> <div class="col-sm-4"> <div id="bell-symb"> <i class="fa fa-bell"></i> </div> </div> </div><!-- row --> </div><!-- header --> <div id="slider"> <div class="row"> <div class="col-sm-8"> <div id="price-section"> <div id="price"> Rs. 2301 </div> <div id="price-details"> <div id="avatar"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg" alt="" /> </div> <div id="price-info">Requested Payment</div> <div id="price-time">5 hrs ago</div> </div> </div><!-- price-section--> </div> <div class="col-sm-4 no-pading-left"> <div id="payment-button-section"> <a href="#" class="btn btn-primary">Accept</a> <a href="#" class="btn btn-default">Decline</a> </div> </div> </div> </div> <div id="feature"> <div class="row"> <div class="col-sm-6"> <div id="money"> <div id="money-title">Amount</div> <div id="money-amount"> <span class="currency">रू</span> 0</div> </div> </div> <div class="col-sm-6"> <ul class="cbtn"> <li>Send</li> <li>Receive</li> <li>Split</li> </ul> </div> </div> </div> <div id="content"> <div id="content-title"> Recharge & Bills </div> <div id="content-body"> <div class="content-row"> <div class="content-col"> <i class="fa fa-mobile"></i> Mobile </div> <div class="content-col"> <i class="fa fa-globe"></i> Internet </div> <div class="content-col"> <i class="fa fa-television"></i> Dish Tv </div> </div> <div class="content-row"> <div class="content-col"> <i class="fa fa-tint"></i> Water </div> <div class="content-col"> <i class="fa fa-video-camera"></i> Movie </div> <div class="content-col"> <i class="fa fa-plane"></i> Flight </div> </div> </div> </div> </div> </body></html>

Related: See More

Black Dashboard
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: