<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="calculator container"> <div class="row"> <h2>Calculator</h2> </div> <div class="row"> <div class="outputBox" contenteditable></div> <div class="buttonContainer"> <div class="row"> <div class="col-xs-2"> <button class="numberButton" type="button">7</button> <button>8</button> <button>9</button> </div> </div> <div class="row"> <div class="col-xs-2"> <button>4</button> <button>5</button> <button>6</button> </div> </div> <div class="row"> <div class="col-xs-2"> <button>1</button> <button>2</button> <button>3</button> </div> </div> <div class="row"> <div class="col-xs-2"> <button class="zeroButton">0</button> <button>=</button> </div> </div> </div> </div> </div>

.clear { clear:both; } button { padding:5px 10px 5px 10px; margin:5px; } button.zeroButton { width:78px; } .spacer { margin-left:46px; }

$(".numberButton").click(function() { $(".outputBox").append($(this).html()); });