Pastillas de texto

Clase 13 de 21 • Curso de Bootstrap 4

Contenido del curso

Introducción al curso

Creando el sitio web

Deploy a producción

Tomar examen

Comentarios

David Alejandro Mosquera Moreno

student•

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.

Eduardo Vergara

student•

Como los moviste a la derecha?

XaviCloud

student•

aragrevo1 ,así se puede : .badges{ text-align: right; }

Fernando Galdós

student•

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

Fernando Galdós

student•

Olvide de decir que es a partir de la version 5.0

Manuel G. Pineda

student•

Excelente aporte compañero. Muchas gracias.

David Dzul

student•

Kathion Vega

student•

hola, me pasas tu código, la parte en que enmarcaste en circulo las fotos??? Plis Usaste border radius pero directamente???

Marcelo Sulca Nieto

student•

Usa la clase
rounded-circle

<img src="..." alt="..." class="rounded-circle">

Alberto Castro Flores

student•

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

Jorge Fidel Zubieta Choque

student•

quiero el curso de bosstrap 5!

Nicolas ortiz suarez

student•

Apoyo totalmente tu idea, un curso boostrap 5 seria genial ya que por fin dejo el jquery.

Juan Esteban Galvis

student•

Me encanto!

Carlos Dugarte

student•

Excelentes oradores jejejeje

Jonas Ivan Tsuchida

student•

Sacha sos un groso, muy bueno este curso!

Diana Paola castañeda talero

student•

Bootstrap the best!!

Cristhian Daza

student•

Wandy Rafael Santana Evangelista

student•

Genial!!, solo un aporte: Si le colocas un border : 0; al card creo que quedaria mejor visualmente, pruebalo.

Harold David Avila Sabogal

student•

buen aporte muchas gracias

Piero Quelopana

student•

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>

José Tuzinkievicz

student•

Usa la imagen leonidas2, tiene el mismo tamaño que las demas

Wandy Rafael Santana Evangelista

student•

Seria bueno que le colocaras un border: 0; a el card.

José Tuzinkievicz

student•

Me gustan mucho los pills

Giselly Romero Nuñez

student•

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 👇

Steven Velez

student•

Teofilo Rosales Gama

student•

Resumen de la clase

<div class="row">
          <div class="col-md-4 mb-4 col-sm-12 col-md-6 col-lg-3">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/sacha.jpg">
              <div class="card-body">
                <div class="badges mb-2"> <!-- Este es el 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">afsdasvasdvavsdcsdavdsavagasdfadcasfdvasd</p>
              </div>
            </div>
          </div>

Daniel Melchor

student•

Hola, buenas tardes a todos

![](

Saludos

Jhosep Pérez

student•

Yo les di un poco mas de padding para que no se vieran tan apretados.
Lo que no logre fue cambiar el tamaño de los <h5> porque queria hacerlos mas grandes. Al final los tuve que cambiar a <h4>.

Luis Fernando Pérez Guzmán

student•

Hola, ¿cómo puedo hacer que los badges se acomoden al centro o a la izquierda de la tarjeta?

Luis Fernando Pérez Guzmán

student•

corrección: *centro o a la derecha

Diego Alejandro Aguilera Martinez

student•

En el div badges agregale la clase text-center o text-right

Angélica Rocha

student•

Listo el Desafio :D

Elita Campo

student•

Andrés David Loaiza Zamudio

student•

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

Leidys Matos

student•

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

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

<div class="row">
          <div class="col-md-4 mb-4 col-sm-12 col-md-6 col-lg-3">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/sacha.jpg">
              <div class="card-body">
                <div class="badges mb-2"> <!-- Este es el 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">afsdasvasdvavsdcsdavdsavagasdfadcasfdvasd</p>
              </div>
            </div>
          </div>

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

Pastillas de texto

Introducción al curso

Repositorio del curso de bootstrap

Bootstrap 4 ¿Qué trae de nuevo esta versión?

¿Que es un framework de frontend?

Nuestro Proyecto: Hola Mundo de Bootstrap

Creando el sitio web

La grilla de Bootstrap

Reto: La grilla de Bootstrap

El footer

El header de nuestro sitio

Creando un carousel de imágenes

Agregando texto informativo del evento

Agregando botones

Las cards de Bootstrap 4

Pastillas de texto

Agregando un contenedor de ancho completo

Los formularios de Bootstrap 4

Agregando un tooltip

Scrollspy: Conociendo la ubicación del usuario en el header

Agregando un modal para comprar tickets

Un nuevo formulario para completar la compra

Deploy a producción

Poniendo nuestro sitio en producción

Conclusiones del curso