No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
18H
32M
17S

Un nuevo formulario para completar la compra

19/21
Recursos

Aportes 47

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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:

<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="alert alert-warning" role="alert">
  A simple warning alert鈥攃heck 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

Excelente explicaci贸n, gracias

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