Styling the Calculator

The calculator works. Now bring in Bootstrap and make it look like something you would actually want to use. The JavaScript does not change — only the HTML gets class names.

Add the CDN link

Paste the Bootstrap <link> into <head>:

<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>

The complete styled calculator

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>

    <div class="container mt-5" style="max-width: 420px;">

      <h1 class="mb-4">Calculator</h1>

      <div class="mb-3">
        <input type="number" id="num1" class="form-control" placeholder="First number">
      </div>

      <div class="mb-3">
        <input type="number" id="num2" class="form-control" placeholder="Second number">
      </div>

      <div class="d-flex gap-2 mb-4">
        <button onclick="calculate('+')" class="btn btn-primary">Add</button>
        <button onclick="calculate('-')" class="btn btn-secondary">Subtract</button>
        <button onclick="calculate('*')" class="btn btn-success">Multiply</button>
        <button onclick="calculate('/')" class="btn btn-warning">Divide</button>
      </div>

      <p id="result" class="fs-5 fw-bold text-primary"></p>

    </div>

    <script>
      function calculate(operator) {
        // get both inputs and read their values as numbers
        let input1 = document.getElementById("num1")
        let input2 = document.getElementById("num2")
        let a = parseFloat(input1.value)
        let b = parseFloat(input2.value)

        // get the result paragraph — used in two places below
        let resultBox = document.getElementById("result")

        // stop early if either input is empty or not a number
        if (isNaN(a) || isNaN(b)) {
          resultBox.innerText = "Please enter two numbers."
          return
        }

        let answer

        if (operator === "+") {
          answer = a + b
        }
        if (operator === "-") {
          answer = a - b
        }
        if (operator === "*") {
          answer = a * b
        }
        if (operator === "/") {
          answer = a / b
        }

        resultBox.innerText = "Answer: " + answer
      }
    </script>

  </body>
</html>

The JavaScript is identical to the previous page. Only the HTML changed.

What each class is doing here

Class	Where	What it does
`container mt-5`	wrapper `<div>`	Centres the content, adds space at the top
`mb-3`	input wrappers	Space below each input
`mb-4`	button wrapper	A little more space below the buttons before the result
`form-control`	inputs	Styled inputs — rounded corners, full width, focus highlight
`d-flex gap-2`	button wrapper	Buttons sit side by side with space between them
`btn btn-primary`	Add button	Solid blue button
`btn btn-secondary`	Subtract button	Grey button
`btn btn-success`	Multiply button	Green button
`btn btn-warning`	Divide button	Yellow/orange button
`fs-5 fw-bold text-primary`	result `<p>`	Slightly large, bold, blue result text

style="max-width: 420px;" on the container keeps the calculator from stretching too wide on a large screen. Bootstrap does not have a built-in class for an exact pixel width, so a small inline style is the right tool here.

Challenge

Try two things:

Change the Divide button from btn-warning to btn-danger. What colour does that give?
Change text-primary on the result paragraph to text-success. What changes?

Then try adding text-center to the <h1>. Does the heading centre itself?

← Building a Calculator