"Card in Html"
Bootstrap 4.0.0 Snippet by ayaz11244

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Card</h2> <div class="card"> <img src="https://image.ibb.co/eBv19R/if_users_11_984127.png" alt="Avatar" style="width:100%"> <div class="container"> <h4><b>Owner Name</b></h4> <p>Current Position</p> </div> </div> </body> </html>
h2 { text-align: center; } .card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; width: 25%; margin: 0 auto; } .card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } .container { padding: 2px 16px; }

Related: See More

Vue Now UI Dashboard PRO
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: