<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="demo"> <div class="calculator"> <div class="screen"><input type="text" /></div> <div class="keypad"> <div class="keys"> <button type="button" class="btn btn-info btn-xs">7</button> <button type="button" class="btn btn-info btn-xs">8</button> <button type="button" class="btn btn-info btn-xs">9</button> <button type="button" class="btn btn-info btn-xs">÷</button> </div> <div class="keys"> <button type="button" class="btn btn-info btn-xs">4</button> <button type="button" class="btn btn-info btn-xs">5</button> <button type="button" class="btn btn-info btn-xs">6</button> <button type="button" class="btn btn-info btn-xs">×</button> </div> <div class="keys"> <button type="button" class="btn btn-info btn-xs">1</button> <button type="button" class="btn btn-info btn-xs">2</button> <button type="button" class="btn btn-info btn-xs">3</button> <button type="button" class="btn btn-info btn-xs">-</button> </div> <div class="keys"> <button type="button" class="btn btn-info btn-xs">0</button> <button type="button" class="btn btn-info btn-xs">C</button> <button type="button" class="btn btn-info btn-xs">=</button> <button type="button" class="btn btn-info btn-xs">+</button> </div> </div> </div> </div>

.keys:not(:last-of-type) { margin-bottom: 4px; } .calculator button { width: 25px; } .calculator { border: 1px solid #D6D6D6; padding: 10px; width: 134px; display: inline-block; background-color: #F5F5F5; } .screen input { border: 1px solid #d9d9d9; border-top: 1px solid #c0c0c0; color: #333; padding: 5px; margin-bottom: 5px; outline: none; width: 100%; } /* Dont add the CSS below */ .demo { text-align: center; margin-top: 50px; }