Easy Calculator App Styled With Bootstrap 5

On this put up, we’ll make a easy on-line calculator app styled with the newest Bootstrap 5 framework.

It’s a calculator app that solely accepts decimal digits. It will assist you to get began with Bootstrap 5 and perceive tips on how to model it into your individual apps.

Find out how to use it:

1. Load the required jQuery library and Bootstrap 5 stylesheet within the doc.

<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Create the HTML for the calculator and elegance the buttons utilizing the Bootstrap’s button utility lessons:

<div class="calculator-area mx-auto justify-content-center border border-primary text-center">
  <div class="historical past col-12">
    <div class="emblem">
      jQueryScript.Web
    </div>
    <div class="below-logo">
      <enter sort="textual content" class="border border-primary form-control-sm text-center history-screen" disabled/>
    </div>
  </div>
  <div class="row">
    <enter sort="textual content" class="input-screen border border-primary form-control-lg col-9 text-end" disabled/>
    <button sort="button" class="btn btn-outline-danger reset col" worth="reset">RESET</button>
  </div>
  <div class="row">
    <button sort="button" class="btn btn-outline-secondary col" worth="7">7</button>
    <button sort="button" class="btn btn-outline-secondary col" worth="8">8</button>
    <button sort="button" class="btn btn-outline-secondary col" worth="9">9</button>
    <button sort="button" class="btn btn-outline-primary col" worth="+">+</button>
  </div>
  <div class="row">
    <button sort="button" class="btn btn-outline-secondary col" worth="4">4</button>
    <button sort="button" class="btn btn-outline-secondary col" worth="5">5</button>
    <button sort="button" class="btn btn-outline-secondary col" worth="6">6</button>
    <button sort="button" class="btn btn-outline-primary col" worth="-">-</button>
  </div>
  <div class="row">
    <button sort="button" class="btn btn-outline-secondary col" worth="1">1</button>
    <button sort="button" class="btn btn-outline-secondary col" worth="2">2</button>
    <button sort="button" class="btn btn-outline-secondary col" worth="3">3</button>
    <button sort="button" class="btn btn-outline-primary col" worth="x">x</button>
  </div>
  <div class="row">
    <button sort="button" class="btn btn-outline-secondary col mod" worth="%">mod</button>
    <button sort="button" class="btn btn-outline-secondary col" worth="0">0</button>
    <button sort="button" class="btn btn-outline-secondary col" worth=".">.</button>
    <button sort="button" class="btn btn-outline-primary col" worth="/">&divide;</button>
  </div>
  <div class="row">
    <button sort="button" class="btn btn-outline-success col-8" worth="=">=</button>
    <button sort="button" class="btn btn-outline-primary col-3" worth="+-">+/-</button>
  </div>
</div>

3. Further CSS kinds for the calculator.

.input-screen {
  background-color: rgb(195, 247, 247);
  font-size: 2vw;
}

.calculator-area {
  width: 600px;
  margin: 5%;
  background-color: #dfdddd;
}

.history-screen {
  background-color: #c7c7c7;
  font-size: 1.6vw;
  max-width: 280px;
}

.row {
  margin: 10px;
}

.btn {
  margin: 5px;
  font-size: xx-large;
}

.reset {
  font-size: 10px;
  font-weight: bolder;
}

.mod {
  font-size: medium;
  font-weight: bolder;
}

.btn-outline-secondary {
  background: linear-gradient(to proper, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 0.1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  colour: #000000;
}

.btn-outline-secondary:hover {
  background-position: 0 0;
}

.btn-outline-secondary:focus {
  colour: #000000;
}

.btn-outline-danger {
  background: linear-gradient(to proper, #f87171 0%, #f87171 50%, #ff0000 50%, #ff0000 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 0.1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  colour: #000000;
}

.btn-outline-danger:hover {
  background-position: 0 0;
}

.btn-outline-danger:focus {
  colour: white;
}

4. Allow the calculator.

<script src="js/app.js"></script> 

This superior jQuery plugin is developed by boraxpr. For extra Superior Usages, please test the demo web page or go to the official web site.