<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <br /> <!-- code start --> <div class="twPc-div"> <a class="twPc-bg twPc-block"></a> <div> <div class="twPc-button"> <a href="#" class="btn btn-primary btn-sm" role="button">Agendar Cita</a> </div> <a title="Mert Salih Kaplan" href="https://twitter.com/mertskaplan" class="twPc-avatarLink"> <img alt="Mert Salih Kaplan" src="http://hospitalmetropolitano.org/_images/slir/?w=100&h=150&c=2:3&i=_media%2Fmedicos%2F64.jpg" class="twPc-avatarImg"> </a> <div class="twPc-divUser"> <div class="twPc-divName"> <a href="https://twitter.com/mertskaplan">Dr. Emilio Patricio Abad Herrera</a> </div> <span> <a href="https://twitter.com/mertskaplan"><b>Titulado en:</b><br /> U. Estatal de Cuenca</span></a> </span> </div> <div class="twPc-divStats"> <ul class="twPc-Arrange"> <li class="twPc-ArrangeSizeFit"> <a href="https://twitter.com/mertskaplan" title="9.840 Tweet"> <span class="twPc-StatLabel twPc-block">Especialidad:</span> <span class="twPc-StatValue">Neorologia</span> <span class="twPc-StatValue">Neorologia</span> <span class="twPc-StatValue">Neorologia</span> </a> </li> <li class="twPc-ArrangeSizeFit"> <a href="https://twitter.com/mertskaplan/following" title="885 Following"> <span class="twPc-StatLabel twPc-block">Direccion:</span> <span class="twPc-StatValue">San Gabriel y N. Arteta, HM, TM 3, P2, Cons. 205</span> </a> </li> </ul> </div> <div class="twPc-divStats"> <ul class="twPc-Arrange"> <li class="twPc-ArrangeSizeFit"> <a href="https://twitter.com/mertskaplan" title="9.840 Tweet"> <span class="twPc-StatLabel twPc-block">E-mail:</span> <span class="twPc-StatValue">pabad@hmetro.med.ec</span> </a> </li> <li class="twPc-ArrangeSizeFit"> <a href="https://twitter.com/mertskaplan/following" title="885 Following"> <span class="twPc-StatLabel twPc-block">Telefono:</span> <span class="twPc-StatValue">3220290 3220270 0997739222</span> </a> </li> </ul> </div> </div> </div> <!-- code end --> </div> </div>

.twPc-div { background: #fff none repeat scroll 0 0; border: 1px solid #e1e8ed; border-radius: 6px; height: 200px; max-width: 600px; // orginal twitter width: 600px; } .twPc-bg { background-image: url("https://pbs.twimg.com/profile_banners/50988711/1384539792/600x200"); background-position: 0 50%; background-size: 100% auto; border-bottom: 1px solid #e1e8ed; border-radius: 4px 4px 0 0; height: 95px; width: 100%; } .twPc-block { display: block !important; } .twPc-button { margin: -35px -10px 0; text-align: right; width: 100%; } .twPc-avatarLink { background-color: #fff; border-radius: 6px; display: inline-block !important; float: left; margin: -30px 5px 0 8px; max-width: 100%; padding: 1px; vertical-align: bottom; } .twPc-avatarImg { border: 2px solid #fff; border-radius: 7px; box-sizing: border-box; color: #fff; height: 160px; width: 130px; } .twPc-divUser { margin: 5px 0 0; } .twPc-divName { font-size: 18px; font-weight: 700; line-height: 21px; } .twPc-divName a { color: inherit !important; } .twPc-divStats { margin-left: 11px; padding: 10px 0; } .twPc-Arrange { box-sizing: border-box; display: table; margin: 0; min-width: 100%; padding: 0; table-layout: auto; } ul.twPc-Arrange { list-style: outside none none; margin: 0; padding: 0; } .twPc-ArrangeSizeFit { display: table-cell; padding: 0; vertical-align: top; } .twPc-ArrangeSizeFit a:hover { text-decoration: none; } .twPc-StatValue { display: block; font-size: 18px; font-weight: 500; transition: color 0.15s ease-in-out 0s; } .twPc-StatLabel { color: #8899a6; font-size: 10px; letter-spacing: 0.02em; overflow: hidden; text-transform: uppercase; transition: color 0.15s ease-in-out 0s; }