Un nuevo formulario para completar la compra

Clase 19 de 21 • Curso de Bootstrap 4

Clase anteriorSiguiente clase

Harold David Avila Sabogal

student•

Kelvin Omar Silvestre Moises

student•

Gracias, me serve de inspiracion.

Jose L. Figueroa

student•

Les comparto mi modal form :

<div class="modal fade" id="modalCompra" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Adquirir Tickets</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="was-validated">
          <div class="form-row">
            <div class="col form-group">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="basic-addon1">@</span>
                </div>
                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                <div class="invalid-feedback">
                  Tu Username es incorrecto, ingrésalo nuevamente
                </div>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col form-group">
              <label class="text-platzi-modal" for="inputPassword5">Password</label>
              <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock" placeholder="Password">
              <div class="invalid-feedback">
                Tu passwaor es incorrecto
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col form-group">
              <div class="form-check">
                <div class="custom-control custom-checkbox mb-3">
                  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
                  <label class="custom-control-label" for="customControlValidation1">Acepto los términos y condicones del sorteo</label>
                  <div class="invalid-feedback">  Debes aceptar los términos y condiciones para acceder al sorteo.</div>
                </div>
              </div>
            </div>
          </div>
        </form>
        <div class="alert alert-success" role="alert">
          Recibirás un correo de confirmación si sales sorteado.
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-platzi">Comprar</button>
      </div>
    </div>
  </div>
</div>

Sebastián Canessa

student•

buen aporte

Noe de Jesus Muñoz Martinez

student•

Muy buen aporte, te quedo muy bien tu modal, felicidades!!!

Wilson Marino Pablo Mendez

student•

Hice algunas modificaciones en el modal

Wilson Marino Pablo Mendez

student•

Harold David Avila Sabogal

student•

Muchas gracias por la información que buen aporte

Fernando Galdós

student•

Codigo Completo

<form action="">
             <div class="row">
               <div  class="form-label col">
                 <div class="input-group mb-3">
                   <span class="input-group-text" id="basic-addon1">@</span>
                   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                 </div>
               </div>
             </div>
           </form>
           <!-- Alerta -->
           <div class="alert alert-warning" role="alert">
             Recibiras un correo de confirmacion si ganas el Sorteo!
           </div>
           <!-- Alerta -->

Luis Alejandro Vera Hernandez

student•

Gracias

Randy Guerra

student•

Gracias,ha servido mucho tus aportes,sin duda. Actualmente en el 2021.

Andrés David Loaiza Zamudio

student•

Brutal curso, he aprendido algo que me llamaba la atención hace mucho y pues sería genial especializarse en esos frameworks que facilitan los procesos de maquetación 🏆

Kathion Vega

student•

en el div con class: modal-body agregamos la etiqueta form y dentro de esta se inserta otro div con clase: form-row y posteriormente otro div mas con class: form-group col