<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="col-md-4"> <center> Gold <a href="#aboutModal" class="btn btn-circle-micro" style="background-color:orange"></a> Silver <a href="#aboutModal" class="btn btn-circle-micro" style="background-color:rgb(13, 44, 64)"></a> Bronze <a href="#aboutModal" class="btn btn-circle-micro" style="background-color:rgb(82, 87, 92)"></a> Total <a href="#aboutModal" class="btn btn-circle-micro" style="background-color:yellow"></a> </center> </div> </div> </div>

.btn-circle { width: 49px; height: 49px; text-align: center; padding: 5px 0; font-size: 20px; line-height: 2.00; border-radius: 30px; } .btn-circle-micro { width: 19px; height: 19px; text-align: center; padding: 1px 0; font-size: 13px; line-height: 0.1; border-radius: 30px; } .btn-circle-sm { width: 35px; height: 35px; text-align: center; padding: 2px 0; font-size: 20px; line-height: 1.65; border-radius: 30px; } .btn-circle-lg { width: 79px; height: 79px; text-align: center; padding: 13px 0; font-size: 30px; line-height: 2.00; border-radius: 70px; }