1

Estoy tratando de alinear un formulario dentro de un div pero como se puede ver en el resultado, queda situado a la derecha y no se como hacer para que quede centrado.

.container-1 {margin: 0 auto; width: 50rem;}	/* 800 */
.bg-2 {background-color: #f6f9fc;}

.bd-example {
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
    border-width: .2rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
<div class="container-1 bg-2">
<div class="bd-example">
<form action="" method="post">

<div class="form-group">
<input class="form-control" type="text" name="titulo" placeholder="Titulo">
</div>


<div class="form-group">
<textarea class="form-control" name="post" placeholder="Post"></textarea>
</div>

<button name="add" class="btn btn-primary">Add</button>
</form>
</div>
</div>

3 respuestas 3

1

Quiza lo deseas centrar el contendido.

.container-1 {margin: 0 auto; width: 50rem;}	/* 800 */
.bg-2 {background-color: #f6f9fc;}

.bd-example {
    display:flex;
    justify-content:center;
    
}
form{
width:60%;
}

.form-group {
    margin-bottom: 1rem;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .370rem;
    margin:auto;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
<div class="container-1 bg-2">
 <div class="bd-example">
  <form action="" method="post">

   <div class="form-group">
    <input class="form-control" type="text" name="titulo" placeholder="Titulo">
   </div>


   <div class="form-group">
    <textarea class="form-control" name="post" placeholder="Post">       </textarea>
   </div>

   <button name="add" class="btn btn-primary">Add</button>
</form>
</div>
</div>

Lo hice utilizando flexbox, seria bueno que leas un poco sobre eso.

0

Estas utilizando clases de bootstrap, por lo que intuyo lo estas usando. De ser así, te faltan clases que te ayudan con la alineación y el responsive, por ejemplo: .row y .col-12

Puedes encontrar toda la información de Bootstrap y cómo utilizar la grilla.

Te dejo un ejemplo funcionando.

Saludos

.bg-blue{
  background-color: #f6f9fc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
<div class="container">
  <div class="row">
    <div class="col-12 p-3 mt-5 bg-blue">
      <form>
        <div class="form-group">
          <input type="text" class="form-control">
        </div>
        <div class="form-group">
          <textarea class="form-control"></textarea>
        </div>
      </form>
    </div>
  </div>
</div>

1
  • Gracias, pero estoy tratando de hacer esto fuera de bootstrap.
    – user101604
    el 15 jul. 2019 a las 23:52
0

El problema lo tienes en el siguiente CSS

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

Estas aplicando un width: 100%;, ademas agregando un padding: .375rem .75rem; y un border: 1px solid #ced4da;. Eso hace que tu elemento mida mas del 100% del ancho (100%+.75rem+.75rem+1px+1px) por eso se sale de la caja. Puedes utilizar la propiedad box-sizing: border-box; para hacer que tu padding y border sean tenido encuenta dentro de la caja y no sumado al width.

Tu Respuesta

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