<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"> <h2>Number Circle</h2> <div class="numberCircle">1</div> <div class="numberCircle">2</div> <div class="numberCircle">3</div> <div class="numberCircle">4</div> <div class="numberCircle">5</div> <div class="numberCircle">6</div> </div> </div>

.numberCircle { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; padding: 8px; background: #fff; border: 2px solid black; color: black; text-align: center; font: 32px Arial, sans-serif; display: inline-block; }