Un nuevo formulario para completar la compra

Hola a todos, soy un viejo alumno del curso y decidí crear el proyecto detalle a detalle como se presento y desarrollo a lo largo del curso más pequeñas correcciones y ciertas mejoras en el código.

Me alegra poder compartirlo para que puedan utilizarlo como referencia y comentarles que cuenta con su repositorio de GitHub para que puedan clonarlo.

Pagina Web: https://luisvalladaresc.github.io/platzi-conf/
Repositorio: https://github.com/luisvalladaresc/platzi-conf

En Bootstrap 5.0 podemos encontrar la info asi:

• Input-Group
  https://getbootstrap.com/docs/5.0/forms/input-group/
  Y el codigo es:

<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>

• Alertas
  https://getbootstrap.com/docs/5.0/components/alerts/

<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>

Hice algunas modificaciones en el modal

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 🏆

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 -->

se termino! y me encanto!!

muy buena clase y la manera de utilizar

Así quedo mi form

Excelente curso, no hay más que decir

Definitivamente Bootstrap lleva nuestros sitios web a otro nivel.

Genial, gran curso, muy importante

Bootstrap page

Acá dejo la mía!

Así lo hice sencillo

Al agregar un nuevo formulario, tendríamos 2 formularios en la misma pagina , si se hiciera un submit , se enviaría los datos de ambos formularios?

actualicen el curso

Me gusto mucho este curso, deberían sacar algunos más…

Este es el Codigo del modal usando Bootstrap v5.1:

el tag

<form>

debe ser usado con al clase

was-validated

para que funcione la validacion.

<!-- Modal -->
<div class="modal fade" id="modalCompra" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Buy Products</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <form class="was-validated">
        
              <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 class="input-group mb-3">
                <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                <!-- <label for="floatingPassword">Password</label> -->
              </div>

              <div class="form-check mb-3">
                <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
                <label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
                <div class="invalid-feedback">Example invalid feedback text</div>
              </div>

          </form>

          <div class="alert alert-warning" role="alert">
            You will be receving an email.
          </div>

        </div>
          

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Maybe Later, thanks</button>
        <button type="button" class="btn btn-special">Buy now Bro</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->

Con esta clase llegamos al final del desarrollo del proyecto 😎
.
🌐 Les comparto mi código en GitHub por si les sirve como guía: https://github.com/iJCode1/bootstrap4_platzi
.
Proyecto desplegado en GitHub Pages: https://ijcode1.github.io/bootstrap4_platzi/proyecto/
.
Resultado final:

Más Bootstrap más tiempo de vida jaja

Yo lo realice de este modo uwu

Bootstrap ta buenisimo

Que genial!!

Que otro rollo bootstrap 😃

Así lo hice sencillo

Muy buena clase.

Muy buen curso, simple, rápido y sencillo. Sacha es un excelente profesor

creo que puedo hacer sitios más bonitos 😃

Dejo mi proyecto y el repositorio.

Fácil de utilizar, muchas gracias.

Seria interesante hacer esta misma pagina con django por ejemplo.

Para que envia los datos al correo que tiene que hacer tu pagina, o alguien sabe como hacerlo?

+2

genial todo este curso

buen curso

Excelente curso

Bootstrap es demasiado útil y práctico. Quiero profundizar más en esto.

Muy buen curso.

No había usado alerts, pero me agrado como se ven.

Brutal el formulario.

Me encantan estas clases interactivas de verdad siento que aprendo más.

Bootstrap es una increíble herramienta para desarrollar, lo usare para desarrollar mi portafolio y subirlo a GitHub

f