Input in Bootstrap 4 does not take up the full width

Asked

Viewed 99 times

1

 <title>Calculadora de Juros compostos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
    integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
    crossorigin="anonymous" />
<link rel="stylesheet" href="calculadoras.css">
<script>

<body>
<div class="container-fluid d-flex justify-content-center">
    <form method="post" action="juros-compostos_v2.php">
        <label for="basic-url">Investimento Inicial</label>
        <div class="input-group mb-3 rounded-0">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
            </div>
            <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0"
                type="number" step="0.01" name="investimento_inicial" min="0.00" max="9999999999.00" required>
        </div>
        <label for="basic-url">Investimento Mensal</label>
        <div class="input-group mb-3 rounded-0">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
            </div>
            <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0"
                type="number" step="0.01" name="investimento_mensal" min="0.00" max="9999999999.00" required>
        </div>
        <label for="basic-url">Por quanto tempo?</label>
        <div class="input-group mb-3 rounded-0">
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0 bg-warning"><i class="far fa-clock"></i></span>
            </div>
            <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0"
                type="number" name="meses" min="1" placeholder="Meses" required>
        </div>
        <label for="basic-url">Juros ao Mês</label>
        <div class="input-group mb-3 rounded-0">
            <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0"
                type="number" step="0.01" name="taxa_de_juros" min="0.01" max="9999999999.00" required>
            <div class="input-group-prepend">
                <span class="input-group-text rounded-0 bg-warning"><i class="fas fa-percent"></i></span>
            </div>
        </div>
        <button type="submit" class="btn btn-warning">Calcular</button>
    </form>
</div>

inserir a descrição da imagem aqui

input bootstrap-4

  • Try adding a style="widht: 100%" inside the inputs...

  • added in input and also tried via css, but unfortunately it didn’t work.

2 answers

0


In his <form> add the native Bootstrap class w-100 this will make the form occupy the entire width of the container

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>

</style>
</head>

<body>

  <div class="container-fluid d-flex justify-content-center">
    <form class="w-100" method="post" action="juros-compostos_v2.php">
      <label for="basic-url">Investimento Inicial</label>
      <div class="input-group mb-3 rounded-0">
        <div class="input-group-prepend">
          <span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
        </div>
        <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" name="investimento_inicial" min="0.00" max="9999999999.00" required>
      </div>
      <label for="basic-url">Investimento Mensal</label>
      <div class="input-group mb-3 rounded-0">
        <div class="input-group-prepend">
          <span class="input-group-text rounded-0 bg-warning"><strong>R$</strong></span>
        </div>
        <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" name="investimento_mensal" min="0.00" max="9999999999.00" required>
      </div>
      <label for="basic-url">Por quanto tempo?</label>
      <div class="input-group mb-3 rounded-0">
        <div class="input-group-prepend">
          <span class="input-group-text rounded-0 bg-warning"><i class="far fa-clock"></i></span>
        </div>
        <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" name="meses" min="1" placeholder="Meses" required>
      </div>
      <label for="basic-url">Juros ao Mês</label>
      <div class="input-group mb-3 rounded-0">
        <input class="form-control currency border border-warning border-top-0 border-right-0 border-left-0" type="number" step="0.01" name="taxa_de_juros" min="0.01" max="9999999999.00" required>
        <div class="input-group-prepend">
          <span class="input-group-text rounded-0 bg-warning"><i class="fas fa-percent"></i></span>
        </div>
      </div>
      <button type="submit" class="btn btn-warning">Calcular</button>
    </form>
  </div>


</body>

</html>

0

your form is limiting the size, just add the style in the form tag

style="widht: 100%

example:

<form method="post" action="juros-compostos_v2.php" style="width: 100%">

Browser other questions tagged input bootstrap-4

You are not signed in. Login or sign up in order to post.