javascript Ajuda para alinhar botões de calculadora JavaScript

[carinavbritto 0]

Boa tarde galera, sou iniciante em desenvolvimento web e construí meu primeiro App em JS, HTML5, CSS3 e Bootstrap4 (uma calculadora).

Acontece que tô tendo dificuldades em deixar a última fileira de botões ("0" e "." ) alinhada e preciso da ajuda de vocês.

Usando a classe "justify-content-center" o botão "." fica em cima de "=". Usando a classe "justify-content-start" fica desalinhado do restante dos butões da calculadora.

 

<div class="calculadora">
            <input id="resultado" type="text" class="form-control resultado" placeholder="0" disabled="disabled">
            
            <div class="row justify-content-center">
              <button onclick="calcular('acao', 'c')" type="button" class="btn btn-dark btn-lg clear font-weight-light">C</button>
              <button onclick="calcular('acao', '/')" type="button" class="btn btn-dark btn-lg font-weight-light">/</button>
              <button onclick="calcular('acao', '*')" type="button" class="btn btn-dark btn-lg font-weight-light">x</button>
            </div>

            <div class="row justify-content-center">
              <button onclick="calcular('valor', 7)" type="button" class="btn btn-dark btn-lg font-weight-light">7</button>
              <button onclick="calcular('valor', 8)" type="button" class="btn btn-dark btn-lg font-weight-light">8</button>
              <button onclick="calcular('valor', 9)" type="button" class="btn btn-dark btn-lg font-weight-light">9</button>
              <button onclick="calcular('acao', '-')" type="button" class="btn btn-dark btn-lg font-weight-light">-</button>
            </div>
            
            <div class="row justify-content-center">
              <button onclick="calcular('valor', 4)" type="button" class="btn btn-dark btn-lg font-weight-light">4</button>
              <button onclick="calcular('valor', 5)" type="button" class="btn btn-dark btn-lg font-weight-light">5</button>
              <button onclick="calcular('valor', 6)" type="button" class="btn btn-dark btn-lg font-weight-light">6</button>
              <button onclick="calcular('acao', '+')" type="button" class="btn btn-dark btn-lg font-weight-light">+</button>
            </div>

            <div class="row justify-content-center">
              <button onclick="calcular('valor', 1)" type="button" class="btn btn-dark btn-lg font-weight-light">1</button>
              <button onclick="calcular('valor', 2)" type="button" class="btn btn-dark btn-lg font-weight-light">2</button>
              <button onclick="calcular('valor', 3)" type="button" class="btn btn-dark btn-lg font-weight-light">3</button>
              <button onclick="calcular('acao', '=')" type="button" class="btn btn-dark btn-lg enter">=</button>
            </div>

            <div class="row justify-content-center" style="margin-top: -60px">
              <button onclick="calcular('valor', 0)" type="button" class="btn btn-dark zero btn-lg font-weight-light">0</button>
              <button onclick="calcular('acao', '.')" type="button" class="btn btn-dark btn-lg font-weight-light">.</button>
            </div>

Agradeço desde já

 

[wanderval 19]

Fica dificil de ajudar você se você não colocar o seu css, apenas a lib do bootstrap não vai deixar nesse formato para que possa avaliar o problema, o problema está no seu css, então está faltando você coloca-lo aqui

[Rodrigo Vieira E da Silva 0]

Olá Carina, tudo bem? Acredito que com CSS você consegue muito alinhar usando o grid-template veja nesse exemplo que o Elcio da Visie fez