<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <div class="container col-5"> <div class="row"> <div class='card col-8 border border-dark'> <div class='card-title'> <h3 class='text-primary'>Mouse, Mickey</h3> </div> <div class='card-body'> <div class='row'> <div class='col d-inline-flex'> <p class='font-weight-bold pr-1'>Code:</p> <p class='pr-2'>800</p> </div> <div class='col d-inline-flex'> <p class='font-weight-bold pr-1'>Phone:</p> <p>100-867-5309</p> </div> </div> <div class='row'> <div class='col d-inline-flex'> <p class='font-weight-bold pr-1'>Email:</p> <p>mickey.mouse@disney.com</p> </div> </div> <div class='row'> <div class='col d-inline-flex'> <p class='font-weight-bold pr-1'>Mentors:</p> <p class='pr-5'>1</p> </div> <div class='col d-inline-flex'> <p class='font-weight-bold pr-1'>Coaches:</p> <p class='pr-1'>0</p> </div> </div> <div class='row'> <div class='col d-inline-flex'> <p class='font-weight-bold pr-1'>Mentees:</p> <p class='pr-5'>2</p> </div> <div class='col d-inline-flex'> <p class='font-weight-bold pr-1'>Coaching:</p> <p class='pr-1'>0</p> </div> </div> <div class='row'> <div class='col d-inline-flex'> <p class='font-weight-bold pr-1'>Dream Job:</p> <p class='pr-5'>Executive Director</p> </div> </div> </div> </div> <div class='card col-4 border border-dark'> <img src='https://visualpharm.com/assets/530/Customer-595b40b75ba036ed117d6052.svg'> </div> </div> <div class='row'> <div class='card col-12 border border-dark'> <div class='card-title d-flex justify-content-center'> <h4 class='text-primary'>360 Review Traits</h4> </div> <div class='card-body d-flex justify-content-center'> <div class='row border-bottom border-top border-dark'> <div class='col d-flex justify-content center'> <span class='d-inline'> <p class='font-weight-bold'>Teamwork</p> <p class='justify-content-center d-flex'>6.3</p> </span> </div> <div class='col d-flex justify-content center'> <span class='d-inline'> <p class='font-weight-bold'>Communication</p> <p class='justify-content-center d-flex'>4.7</p> </span> </div> <div class='col d-flex justify-content center'> <span class='d-inline'> <p class='font-weight-bold'>Interpersonal</p> <p class='justify-content-center d-flex'>5.2</p> </span> </div> <div class='col d-flex justify-content center'> <span class='d-inline'> <p class='font-weight-bold'>Flexibility</p> <p class='justify-content-center d-flex'>2.3</p> </span> </div> <div class='col d-flex justify-content center'> <span class='d-inline'> <p class='font-weight-bold'>Leadership</p> <p class='justify-content-center d-flex'>7.5</p> </span> </div> <div class='col d-flex justify-content center'> <span class='d-inline'> <p class='font-weight-bold'>Performance</p> <p class='justify-content-center d-flex'>7.9</p> </span> </div> </div> </div> </div> </div> <div class='row'> <div class='card col-12 border border-dark'> <div class='card-title d-flex justify-content-center'> <h4 class='text-primary'>Leadership</h4> </div> <div class='card-body d-flex justify-content-center'> <div class='row'> <div class='col d-inline-flex'> <p class='font-weight-bold text-nowrap pr-2'>Training Level:</p> <div class='d-inline-flex' id='leaderDots'> <span class='dot green'></span> <span class='dot'></span> <span class='dot'></span> </div> </div> <div class='col'></div> <div class='col d-inline-flex'> <p class='font-weight-bold text-nowrap pr-2'>Progress to next Level:</p> <p>11.1%</p> </div> </div> </div> </div> </div> <div class='row'> <div class='card col-12 border border-dark'> <div class='card-title d-flex justify-content-center'> <h4 class='text-primary'>Toastmasters</h4> </div> <div class='card-body d-flex justify-content-center'> <div class='row'> <div class='column d-inline-flex'> <p class='font-weight-bold pr-2'>Presentation Level:</p> <div class='dot green'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> <div class='dot'></div> </div> </div> </div> </div> </div> </div>

.dot { height:25px; width:25px; background-color: #bbb; border-radius:50%; margin-left:2px; margin-right:2px; } .dot.green { height:25px; width:25px; background-color: #009933; border-radius:50%; margin-left:2px; margin-right:2px; }