<section id="main">
  <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6 col-md-offset-3 col-sm-offset-3 col-xs-offset-3 text-center">
          <h1>Calculator</h1>
          <div class="wrapper">
              <div class="row">
                <label id="output-screen" class="form-control"></label>
              </div>
              <div class="pad">
                <div class="row">
                  <button class="btn pad-btn" data-ref="key" data-val="7">7</button>
                  <button class="btn pad-btn" data-ref="key" data-val="8">8</button>
                  <button class="btn pad-btn" data-ref="key" data-val="9">9</button>
                  <button class="btn pad-btn" data-val="DEL">DEL</button>
                  <button class="btn pad-btn" data-val="AC">AC</button>
                </div>
                <div class="row">
                  <button class="btn pad-btn" data-ref="key" data-val="4">4</button>
                  <button class="btn pad-btn" data-ref="key" data-val="5">5</button>
                  <button class="btn pad-btn" data-ref="key" data-val="6">6</button>
                  <button class="btn pad-btn" data-ref="operand" data-val="*">x</button>
                  <button class="btn pad-btn" data-ref="operand" data-val="/">:</button>
                </div>
                <div class="row">
                  <button class="btn pad-btn" data-ref="key" data-val="1">1</button>
                  <button class="btn pad-btn" data-ref="key" data-val="2">2</button>
                  <button class="btn pad-btn" data-ref="key" data-val="3">3</button>
                  <button class="btn pad-btn" data-ref="operand" data-val="+">+</button>
                  <button class="btn pad-btn" data-ref="operand" data-val="-">-</button>
                </div>
                 <div class="row">
                  <button class="btn pad-btn" data-ref="key" data-val="0">0</button>
                  <button class="btn pad-btn" data-ref="key" data-val=".">.</button>
                  <button class="btn pad-btn" data-val="(">(</button>
                  <button class="btn pad-btn" data-val=")">)</button>
                  <button class="btn pad-btn" data-ref="equal" data-val="=">=</button>
                </div>
            </div> <!-- end of pad -->
          </div>
        </div>
    </div>
  </div>
</section>