Pastillas de texto

A los Badges se les puede dar un poco más de padding para que “respiren más”, también se puede contrastar el color del texto con el del background para que luzca algo mejor.

En Bootsrap el codigo para las badges cambia un poco
Ahora es asi:

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>```

para bootstrap 5 se escribe asi: class=“badge bg-dark”. si le pones badge en vez de bg te muestra un background white.

Me encanto!

Sacha sos un groso, muy bueno este curso!

Bootstrap the best!!

Actualización:

<section id="speakers" class="mt-4">
      <div class="container">
        <div class="row">
          <div class="col text-center text-uppercase">
            <small>Conoce a los</small>
            <h2>Oradores</h2>            
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-md-6 col-lg-3 mb-4">
            <div class="card">
              <img src="assets/speakers/sacha.jpg" class="card-img-top rounded-circle" alt="Foto de Sacha">
              <div class="card-body">
                <h5 class="card-title text-center">Sacha Lifszyc</h5>
                <p class="card-text">Vestibulum vitae diam risus. Aenean eros ipsum, imperdiet id justo et, tempus maximus lorem. Aenean maximus, enim non scelerisque ornare, risus urna luctus sapien, id interdum nunc sapien nec dolor.</p>
                <div class="row"> 
                  <div class="col offset-4 offset-md-3 offset-lg-2">
                    <div class="badges">
                      <span class="badge badge-warning">JavaScript</span>
                      <span class="badge badge-info">React</span>
                    </div>
                  </div>
                </div>      
              </div>
            </div>            
          </div>
          <div class="col-12 col-md-6 col-lg-3 mb-4">
            <div class="card">
              <img src="assets/speakers/leonidas.jpeg" class="card-img-top rounded-circle" alt="Foto de Leonidas">
              <div class="card-body">
                <h5 class="card-title text-center">Leonidas Esteban</h5>
                <p class="card-text">Vestibulum vitae diam risus. Aenean eros ipsum, imperdiet id justo et, tempus maximus lorem. Aenean maximus, enim non scelerisque ornare, risus urna luctus sapien, id interdum nunc sapien nec dolor.</p>
                <div class="row"> 
                  <div class="col offset-4 offset-md-4 offset-lg-3"> 
                    <div class="badges">
                      <span class="badge badge-primary">PHP</span>
                      <span class="badge badge-success">HTML</span>
                    </div>
                  </div>
                </div>      
              </div>
            </div>            
          </div>
          <div class="col-12 col-md-6 col-lg-3 mb-4">
            <div class="card">
              <img src="assets/speakers/freddy.jpeg" class="card-img-top rounded-circle" alt="Foto de Freddy">
              <div class="card-body">
                <h5 class="card-title text-center">Freddy Vega</h5>
                <p class="card-text">Vestibulum vitae diam risus. Aenean eros ipsum, imperdiet id justo et, tempus maximus lorem. Aenean maximus, enim non scelerisque ornare, risus urna luctus sapien, id interdum nunc sapien nec dolor.</p>
                <div class="row"> 
                  <div class="col offset-4 offset-md-3 offset-lg-1 offset-xl-2">
                    <div class="badges">
                      <span class="badge badge-secondary">Marketing</span>
                      <span class="badge badge-primary">Laravel</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>            
          </div>
          <div class="col-12 col-md-6 col-lg-3 mb-4">
            <div class="card">
              <img src="assets/speakers/cvander.jpeg" class="card-img-top rounded-circle" alt="Foto de Christian">
              <div class="card-body">
                <h5 class="card-title text-center">Christian Van der H.</h5>
                <p class="card-text">Vestibulum vitae diam risus. Aenean eros ipsum, imperdiet id justo et, tempus maximus lorem. Aenean maximus, enim non scelerisque ornare, risus urna luctus sapien, id interdum nunc sapien nec dolor.</p>
                <div class="row"> 
                  <div class="col offset-4 offset-md-3 offset-lg-2 offset-xl-3">
                    <div class="badges">
                      <span class="badge badge-warning">JavaScript</span>
                      <span class="badge badge-info">React</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>            
          </div>          
        </div>

      </div>
    </section>

Me gustan mucho los pills

Listo mi desafío, me encantó 😍 La verdad aparte del inspector, Bootstrap será mi mejor amigo me ayuda a optimizar cualquier cantidad de tiempo de desarrollo. Aca mi ranking de mis mejores oradores 👇

Hola, buenas tardes a todos

![](

Saludos

Listo el Desafio 😄

La documentación lo es todo

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>```

Adaptando Badges a mi proyecto.

Usuario Windows alt + ↑

Muy buena clase.

Asi seria en boostrap 5.

<code> 
<div class="badges">
                  <span class="badge bg-warning text-dark">JavaScript</span>
                  <span class="badge bg-info text-dark">Info</span>

Que cool estan los badges 😎

Reto cumplido

Very nice!

RETO 5:

Tengo una duda, ya le intenté y no puedo xD

Quiero quitarle el espacio entre las columnas… pongo la imagen del espacio que quiero quitar…!

muy buena esta clase

Las tarjetas me salen con hipervínculo, ¿cómo se lo quito?

Genial

Reto cumplido.

Buen Aporte.

Listo! Bootstrap sera nuestro mejor amigo jaja

Para acomodarlos a la derecha lo hice de esta forma

<div class="bages d-flex justify-content-end mb-2">
     <span class="badge bg-info p-2">Flutter</span>
     <span class="badge bg-danger p-2 ms-2">Java</span>
</div>

Entonces me queda de esta forma

<section id="speakers" class="mt-4">
      <div class="container">
        <div class="row">
          <div class="col text-center text-uppercase">
            <small>Conoce a los</small>
            <h2>Oradores</h2>            
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="card">
              <img src="assets/speakers/sacha.jpg" class="card-img-top" alt="Foto de Sacha">
              <div class="card-body">
                <div class="badges">
                  <span class="badge badge-warning">JavaScript</span>
                  <span class="badge badge-info">React</span>
                </div>
                <h5 class="card-title">Sacha Lifszyc</h5>
                <p class="card-text">Vestibulum vitae diam risus. Aenean eros ipsum, imperdiet id justo et, tempus maximus lorem. Aenean maximus, enim non scelerisque ornare, risus urna luctus sapien, id interdum nunc sapien nec dolor.</p>
              </div>
            </div>            
          </div>
          <div class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="card">
              <img src="assets/speakers/leonidas.jpeg" class="card-img-top" alt="Foto de Leonidas">
              <div class="card-body">
                <div class="badges">
                  <span class="badge badge-primary">PHP</span>
                  <span class="badge badge-success">HTML</span>
                </div>
                <h5 class="card-title">Leonidas Esteban</h5>
                <p class="card-text">Vestibulum vitae diam risus. Aenean eros ipsum, imperdiet id justo et, tempus maximus lorem. Aenean maximus, enim non scelerisque ornare, risus urna luctus sapien, id interdum nunc sapien nec dolor.</p>
              </div>
            </div>            
          </div>
          <div class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="card">
              <img src="assets/speakers/freddy.jpeg" class="card-img-top" alt="Foto de Freddy">
              <div class="card-body">
                <div class="badges">
                  <span class="badge badge-secondary">Marketing</span>
                  <span class="badge badge-primary">Laravel</span>
                </div>
                <h5 class="card-title">Freddy Vega</h5>
                <p class="card-text">Vestibulum vitae diam risus. Aenean eros ipsum, imperdiet id justo et, tempus maximus lorem. Aenean maximus, enim non scelerisque ornare, risus urna luctus sapien, id interdum nunc sapien nec dolor.</p>
              </div>
            </div>            
          </div>
          <div class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="card">
              <img src="assets/speakers/cvander.jpeg" class="card-img-top" alt="Foto de Christian">
              <div class="card-body">
                <div class="badges">
                  <span class="badge badge-warning">JavaScript</span>
                  <span class="badge badge-info">React</span>
                </div>
                <h5 class="card-title">Christian Van der H.</h5>
                <p class="card-text">Vestibulum vitae diam risus. Aenean eros ipsum, imperdiet id justo et, tempus maximus lorem. Aenean maximus, enim non scelerisque ornare, risus urna luctus sapien, id interdum nunc sapien nec dolor.</p>
              </div>
            </div>            
          </div>          
        </div>

      </div>
    </section>

Genial !!!

 <div class="col-12 col-md-6 col-lg-4 mb-4">
            <div class="card" >
              <img src="assets/images/logo.jpeg" class="card-img-top" alt="foto de portada">
              <div class="card-body">
                <h5 class="card-title mb-0">Segundo integrante</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>```

Reto cumplido

<section id="Speaker" class="mt-4">
      <div class="container">
        <div class="row">
          <div class="col text-center text-uppercase">
            <small>conoce a los</small>
            <h2 class="h3">Conferencistas</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/sacha.jpg" class="Foto de Sacha">
              <div class="card-body">
                <div class="badge">
                  <span class="badge badge-warning">JavaScript</span>
                  <span class="badge badge-info">React</span>
                </div>
                <h5 class="card-title">Sacha Lifszyc</h5>
                <p class="card-text mt-2">Sed neque ipsum, tempus malesuada dapibus eget, faucibus sit amet erat. Sed venenatis neque ac sapien pretium, sed maximus sapien interdum. Nullam mattis lobortis metus ac dapibus. Maecenas at congue sapien, id ultrices purus. In hac habitasse platea dictumst.</p>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
            <div class="card" >
              <img class="card-img-top" src="assets/speakers/leonidas2.jpeg" class="Foto de Leonidas">
              <div class="card-body">
                <div class="badge">
                  <span class="badge badge-secondary">Front-End</span>
                  <span class="badge badge-info">PHP</span>
                </div>
                <h5 class="card-title">Leonidas Esteban</h5>
                <p class="card-text mt-2">Sed neque ipsum, tempus malesuada dapibus eget, faucibus sit amet erat. Sed venenatis neque ac sapien pretium, sed maximus sapien interdum. Nullam mattis lobortis metus ac dapibus. Maecenas at congue sapien, id ultrices purus. In hac habitasse platea dictumst.</p>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
            <div class="card" >
              <img class="card-img-top" src="assets/speakers/freddy.jpeg" class="Foto de Freddy">
              <div class="card-body">
                <div class="badge">
                  <span class="badge badge-dark">Emprendimiento</span>
                  <span class="badge badge-primary">Startups</span>
                </div>
                <h5 class="card-title">Freddy Vega</h5>
                <p class="card-text mt-2">Sed neque ipsum, tempus malesuada dapibus eget, faucibus sit amet erat. Sed venenatis neque ac sapien pretium, sed maximus sapien interdum. Nullam mattis lobortis metus ac dapibus. Maecenas at congue sapien, id ultrices purus. In hac habitasse platea dictumst.</p>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
            <div class="card" >
              <img class="card-img-top" src="assets/speakers/cvander.jpeg" class="Foto de Cvander">
              <div class="card-body">
                <div class="badge">
                  <span class="badge badge-dark">Emprendimiento</span>
                  <span class="badge badge-primary">Startups</span>
                </div>
                <h5 class="card-title">Christian Van Der H.</h5>
                <p class="card-text mt-2">Sed neque ipsum, tempus malesuada dapibus eget, faucibus sit amet erat. Sed venenatis neque ac sapien pretium, sed maximus sapien interdum. Nullam mattis lobortis metus ac dapibus. Maecenas at congue sapien, id ultrices purus. In hac habitasse platea dictumst.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

Reto Cumplido!

Me va gustando mucho bootstrap

Reto cumplido, pero no sé como se suben las imagenes acá.

Excelente clase

woooo, eso no me lo sabia que bien 😄

Excelente!👍👌

Yo estoy haciendo el uso de pug e implemente un mixin para las cards y ademas un if para que dependiendo del framework cambie el badge de color.

<code>
mixin cards(imagen,lenguaje,framework,orador,descripcion)
    div(class="col-12 col-md-6 col-lg-4 mb-4")
        div(class="card")
            img(class="card-img-top" src="assets/speakers/"+imagen alt="Foto de speaker")
            div(class="card-body")
                div(class="badges text-md-right mb-2")
                        span(class="badge badge-warning mr-2")=lenguaje
                        if framework == 'Angular'
                            span(class="badge badge-danger")=framework
                        else if framework == 'Vue'
                            span(class="badge badge-success")=framework
                        else
                            span(class="badge badge-info")=framework
                h5(class="card-title")=orador
                p(class="card-text")=descripcion

super la forma en crear badges… me esta gustando bootstrap, aunque estoy muy acostumbrado a css

Asi va mi proyecto con la rolita del Quevedo

Los Badges ayudan a resaltar pequeños textos. Cool.

HTML

<div class="badges">
                        <span class="badge bg-warning">Combat</span>
                        <span class="badge bg-info">Aircraft</span>
                    </div>

CSS

.badges{
    text-align: right;
}

Para hacer la Edición Multicursor en Visual estudio, primero ponen el cursor donde desean comenzar a escribir, luego presionan la tecla CONTROL + ALT y luego seleccionan la siguiente posición del segundo cursor, y repiten el proceso hasta que tengan el numero de cursores que deseen, Escriben lo que quieren escribir al tiempo en todos los cursores y luego presionan ESCAPE para salir del modo Edicion multicursor

Para ahorrar tiempo si están escribiendo código en Visual Studio, pueden duplicar, palabras, lineas, divisiones, o cualquier selección tan solo seleccionando lo que desean duplicar y luego presionan las teclas CONTROL + D

Si están usando Visual Studio , para mover varias lineas de código hacia arriba: Primero seleccionan lo que quieren mover y luego con la tecla ALT + Flecha Hacia Arriba

Gente me mande de lleno y segui la clase con bootstrap 5, me fije el manual oficial pero gran parte de las cosas no funcionan, no entiendo el xq… asi que segui el curso con boots4… osea es rarisimo, quiza se cayo el cdn pero vengo renegando desde los primeros videos… Aviso x si alguien llego hasta aca y los text no se alinean, los badges no aparecen, el slider no pasa las fotos… etc…etc…

f

“aww que bonito” uwu …