junto con saludarlos, voy a explicar un poco el contexto.
Realicé un formulario que está hecho con bootstrap y se ve de la siguiente forma, voy a poner una foto para que se hagan la idea de cómo se ve:
El esquema de las columnas es el siguiente: También comentar que al form en su clase le puse d-flex justify-content-center para que me lo ordene así:
--col-lg-12 (este es para el titulo)
--form (todo el formulario)
----col-lg-7 (columna de la izquierda)
------formulario-cl
----col-lg-5 (columna de la derecha)
------formulario-hijo
------formulario-hijo
Ahora el código del container que tiene todo:
<div class="container">
<div class="row">
<div class="col-lg-12 d-flex justify-content-center">
<h1 class="titulo1">Formulario</h1>
</div>
<form action="" method="post" class="formulario col-lg-12 d-flex justify-content-center">
<div class="col-lg-7 d-flex justify-content-center">
<div class="formulario-cl formulario-base">
<h3>Contacto</h3>
<div class="form-group row">
<label for="rut" class="col-sm-4 col-form-label">Rut</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="rut" name="rut" placeholder="" required oninput="checkRut(this)">
</div>
</div>
<div class="form-group row">
<label for="nombres" class="col-sm-4 col-form-label">Nombres</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nombres" name="nombres" placeholder="Nombres">
</div>
</div>
<div class="form-group row">
<label for="apellidos" class="col-sm-4 col-form-label">Apellidos</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="apellidos" name="apellidos" placeholder="Nombres">
</div>
</div>
<div class="form-group row">
<label for="fechanacimiento" class="col-sm-4 col-form-label">Fecha Nacimiento</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="fechanac" name="fechanacimiento" placeholder="02-02-1986">
</div>
</div>
<div class="form-group row">
<label for="celular" class="col-sm-4 col-form-label">Número Celular</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="celular" name="celular" placeholder="+56987768598">
</div>
</div>
<div class="form-group row">
<label for="sexo" class="col-sm-4 col-form-label">Sexo</label>
<div class="col-sm-8 pad-sexo">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">Masculino</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">Femenino</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="correo" class="col-sm-4 col-form-label">Correo</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="correo" name="celular" placeholder="[email protected]">
</div>
</div>
<div class="form-group row">
<label for="direccion" class="col-sm-4 col-form-label">Dirección</label>
<div class="col-sm-8">
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Dirección">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Número">
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="localidad" class="col-sm-4 col-form-label">Localidad</label>
<div class="col-sm-8">
<select id="inputState" class="form-control">
<option selected>Elija...</option>
<option value="1">Agua Fresca</option>
<option value="2">Barrio Prat</option>
<option value="3">Otra</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="instagram" class="col-sm-4 col-form-label">Instagram</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="instagram" name="instagram" placeholder="instagram">
</div>
</div>
</div>
</div>
<div class="col-lg-5 d-flex flex-column">
<!-- Formulario Hijo 1-->
<div class="formulario-hijo formulario-base">
<h4>Contacto Adicional 1</h4>
<div class="form-group row">
<label for="nomad1" class="col-sm-4 col-form-label">Nombres</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nomad1" name="nomad1" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="apellidosad1" class="col-sm-4 col-form-label">Apellidos</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="apellidosad1" name="apellidosad1" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="telefonoad1" class="col-sm-4 col-form-label">Teléfono</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="telefonoad1" name="telefonoad1" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="correoad1" class="col-sm-4 col-form-label">Correo</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="correoad1" name="correoad1" placeholder="">
</div>
</div>
</div>
<!-- formulario hijo 2-->
<div class="formulario-hijo formulario-base">
<h4>Contacto Adicional 2</h4>
<div class="form-group row">
<label for="nombread2" class="col-sm-4 col-form-label">Nombres</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nombread2" name="nombread2" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="apellidosad2" class="col-sm-4 col-form-label">Apellidos</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="apellidosad2" name="apellidosad2" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="telefonoad2" class="col-sm-4 col-form-label">Teléfono</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="telefonoad2" name="telefonoad2" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="correoad2" class="col-sm-4 col-form-label">Correo</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="correoad2" name="correoad2" placeholder="">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Ahora!! según entiendo, si agrego otro div bajo el col-lg-5 que sea col-lg-12 y dentro le pongo un botón para el submit, creo que debería quedar abajo de todo, pero no... me corre todo para la izquierda.
--col-lg-12 (este es para el titulo)
--form (todo el formulario)
----col-lg-7 (columna de la izquierda)
------formulario-cl
----col-lg-5 (columna de la derecha)
------formulario-hijo
------formulario-hijo
----col-lg-12
-------boton
Se que es algo de la propiedad de flex pero no se me ocurre cómo arreglarlo o puede que mi estructura esté mal hecha pero mi idea es que el formulario se vea así.
Gracias