0

estoy haciendo un formulario HTML y Bootstrap, la cual quedo de esta manera:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container py-4">
  <div class="card">
    <div class="card-header bg-info text-center">
 	<h5 style="color:white">Formulario de Pais</h5>
    </div>
    <div class="card-body  border border-info p-5">
      <form class="text-center">
        <div class="form-group row justify-content-center py-4">
 	  <label for="nombre" class="col-sm-2 col-form-label">Pais</label>
 	  <div class="col-sm-6">
            <input type="text" class="form-control"/>
 	  </div>
        </div>
        <div>
        </div>
        <div>
        </div>
	<input type="submit" value="Crear Pais" class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" />
      </form>
    </div>
  </div>
</div>

Quisiera que me ayudaran en la manipulación de tamaño, me gustaría saber como cambiar el tamaño de mi formulario para que no se vea tan largo, como lo tiene actualmente. No lo he manipulado en CSS porque lo estoy haciendo en Angular y borre el archivo CSS que este genera. Espero que puedan ayudarme, muchas gracias.

1 respuesta 1

2

En las clases le eliminé py-4 p-5 y my-4. También eliminé un div vacío que estaba antes del botón.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="card">
    <div class="card-header bg-info text-center">
      <h5 style="color:white">Formulario de Pais</h5>
    </div>
    <div class="card-body  border border-info">
      <form class="text-center">
        <div class="form-group row justify-content-center">
          <label for="nombre" class="col-sm-2 col-form-label">Pais</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" />
          </div>
        </div>
        <div>
          <input type="submit" value="Crear Pais" class="btn btn-outline-info btn-rounded btn-block waves-effect z-depth-0" />
        </div>
      </form>
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.