"Profile cards by john niro yumang"
Bootstrap 4.0.0 Snippet by meiwenti

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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!---************* arrangement by john niro yumang b4.0 alpha project graduation ******************* --> <!DOCTYPE html> <html lang="en"> <title>index</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!------------start head scripts and link src------------> <head> <script src="js/jq.js"></script> <!---- for moving objects make this first always after boootstrap.css -----> <link rel="stylesheet" href="css/bootstrap.css"> <!---- Bootstrap.min link local project skeleton -----> <link rel="stylesheet" href="css/w3.css"> <!--- This is the local w3css extended ---> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/style.css"> <!---- my own link local for customizing -----> <script src="js/bootstrap.min.js"></script> <!---- Bootstrap js link local for well and modal + panels -----> <link rel="icon" href="images/a.png" type="images/water.png" /> <!---- Icon link local -----> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <!------- font awesome online plug ---------------> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <!-------------end head scripts and link src -------------> <!------------start content ------------> <body> <div class="wrapper"> <div class="container-fluid" id="top-container-fluid-nav"> <div class="container"> <!---- for nav container -----> </div> </div> <div class="container-fluid" id="body-container-fluid"> <div class="container"> <!---- for body container ----> <div class="row"> <!-------mother container middle class-------------------> <div class="col-lg-4"> <div class="card" style="width:100%"> <img class="card-img-top" src="https://lh3.googleusercontent.com/a8_ujXr3VWHstGkxgJL1TkqfrytP4r_52QhcvqRQVaQPRQ9DHdQ6seI99qc4jLjC0WDM=h900" alt="Card image" style="width:100%"> <div class="card-body"> <h4 class="card-title">John Niro Yumang</h4> <ul class="list-inline" id="courses"> <li class="list-inline-item"> <i class="fa fa-folder-open-o"></i> Network administrator </li> </ul> <p class="card-text">I am a professional student designer i love my work so hire me !!</p> <div class="address"> <ul class="w3-ul w3-small"> <li> <i class="fa fa-calendar-o" aria-hidden="true"></i> #403 3rd Block, Pampanga, Phillippines </li> <li><i class="fa fa-calendar-o" aria-hidden="true"></i> University of the Phillippines </li> <li><i class="fa fa-calendar-o" aria-hidden="true"></i> Single </li> <li><i class="fa fa-calendar-o" aria-hidden="true"></i> Join October 23 1990 </li> <li><i class="fa fa-calendar-o" aria-hidden="true"></i> Hired by #100 people </li> </ul> </address> <p><button class="w3-button w3-block w3-indigo" data-toggle="tooltip" data-placement="top" title="Free to message and hire us"> <i class="fa fa-comment-o fa-lg"></i> Hire me </button></p> </div> <ul class="w3-ul w3-small"> <li><a href="" > Design </a> <span>93%</span></li> <li><a href="">Front end </a><span>12%</span></li> <li><a href="">Front end </a><span>12%</span></li> </ul> <hr> <p class="lower-case"> Feedback</p> <div class="ratings"> <ul class="list-inline"> <li class="list-inline-item selected"><i class="fa fa-star"></i></li> <li class="list-inline-item selected"><i class="fa fa-star"></i></li> <li class="list-inline-item selected"><i class="fa fa-star"></i></li> <li class="list-inline-item selected"><i class="fa fa-star"></i></li> <li class="list-inline-item selected"><i class="fa fa-star"></i></li> </ul> </div> <hr> <div class="socials"> <p class="lower-case "> Follow us</p> <ul class="list-inline"> <button class="w3-button w3-blue"><i class="fa fa-facebook"></i></button> <button class="w3-button w3-yellow"><i class="fa fa-twitter"></i></button> <button class="w3-button w3-red"><i class="fa fa-youtube"></i></button> <button class="w3-button w3-orange"><i class="fa fa-google"></i></button> <button class="w3-button w3-teal"><i class="fa fa-flickr"></i></button> <button class="w3-button w3-gray"><i class="fa fa-instagram"></i></button> </ul> </div> <p class="learn"><a href=""> Learn more </a> | <a href=""> Adveratise </a> | <a href=""> Cookies </a> | <a href=""> Terms & Policy </a> </p> <hr> <p class="lower-case "> Locate us</p> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d123405.88854614287!2d120.60617944332368!3d14.856990020414184!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x33965af30887de57%3A0x1aa8d246509d51e5!2sMacabebe%2C+Pampanga!5e0!3m2!1sen!2sph!4v1514036434857" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> <hr> <p class="lower-case "> Twitter plugin</p> <a class="twitter-timeline" href="https://twitter.com/Jhean_Yhu" data-widget-id="731156277431140352">Tweets by @Jhean_Yhu</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <br> <p class="learn" > <a href=""> Adveratise </a> | <a href=""> Cookies </a> | <a href=""> Terms & Policy </a> </p> </div> </div> </div> </div> </div> <div class="container-fluid" id="footer-container-fluid"> <div class="container"> <!---- for footer container ----> </div> </div> </div> </body> <!-------------end content--------------> <!------------sub footer code ------------> <footer> </footer> <!------------in-line script purpose ------------> <script> $('.carousel').carousel({ interval: 2000 }) </script> <style> </style> <!------------in-line style purpose ------------>
body { background-image: url("../images/.jpg"); background-color:white;; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover; height:2000px; } /*----------------Containers--------------------*/ #top-container-fluid-nav { background-image: url("../images/.jpg"); background-color:inherit; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover ; } #body-container-fluid { background-image: url("../images/.jpg"); background-color:inherit; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover; margin-top:50px; } #footer-container-fluid { background-image: url("../images/.jpg"); background-color:inherit; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover; padding-bottom:25px; padding-top:25px; } .card { padding:10px; border:0px solid white; box-shadow:0px 7px 16px 0px rgba(0, 0, 0, 0.09); } .card-title { color:; font-size:16px; text-align:center; } .card-text { color:#84919B; font-size:12px; text-align:center; } #courses { text-align:center; } /********************** courses **********************/ .list-inline-item { font-size:13px; color:#84919B; } /********************** courses **********************/ .address .w3-ul li { border:0px solid white; line-height:1px; } /********************** abilities **********************/ span { font-size:10px; float:right; background-color:#F4F7F9; border-radius:10px; padding:3px 8px; color:#84919B; } .lower-case { color:#84919B; font-size:12px; text-align:center; } /********************** abilities **********************/ /********************** ratings **********************/ .ratings .fa { color:indigo; font-size:25px; } .ratings .fa:hover { color:yellow; } .ratings .list-inline { text-align:center; } /********************** ratings **********************/ /********************** socials **********************/ .socials { text-align:center; } /********************** socials **********************/ /********************** footer **********************/ .learn {font-size:12px;color:gray;} .learn a:hover {text-decoration:none;} /********************** footer **********************/

Related: See More

Vue Material Kit
Information Cards
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: