<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"> <div class="profile-header-container"> <div class="profile-header-img"> <img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" /> <!-- badge --> <div class="rank-label-container"> <span class="label label-default rank-label">100 puntos</span> </div> </div> </div> <div class="profile-header-container"> <div class="profile-header-img"> <img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" /> <!-- badge --> <div class="rank-label-container"> <span class="label label-default rank-label">100 puntos</span> </div> </div> </div> </div> </div>

body, html { height: 100%; background-repeat: no-repeat; background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)); } /** * Profile image component */ .profile-header-container{ margin: 0 auto; text-align: center; } .profile-header-img { padding: 54px; } .profile-header-img > img.img-circle { width: 120px; height: 120px; border: 2px solid #51D2B7; } .profile-header { margin-top: 43px; } /** * Ranking component */ .rank-label-container { margin-top: -19px; /* z-index: 1000; */ text-align: center; } .label.label-default.rank-label { background-color: rgb(81, 210, 183); padding: 5px 10px 5px 10px; border-radius: 27px; }