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.
Como los moviste a la derecha?
aragrevo1 ,así se puede :
.badges{
text-align: right;
}
En Bootsrap el codigo para las badges cambia un poco
Ahora es asi:
hola, me pasas tu código, la parte en que enmarcaste en circulo las fotos??? Plis Usaste border radius pero directamente???
Usa la clase rounded-circle
<img src="..." alt="..."class="rounded-circle">
para bootstrap 5 se escribe asi: class="badge bg-dark". si le pones badge en vez de bg te muestra un background white.
quiero el curso de bosstrap 5!
Apoyo totalmente tu idea, un curso boostrap 5 seria genial ya que por fin dejo el jquery.
Me encanto!
Excelentes oradores jejejeje
Sacha sos un groso, muy bueno este curso!
Bootstrap the best!!
Genial!!, solo un aporte:
Si le colocas un border : 0; al card creo que quedaria mejor visualmente, pruebalo.
buen aporte muchas gracias
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">SachaLifszyc</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">LeonidasEsteban</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">FreddyVega</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">ChristianVan 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>
Usa la imagen leonidas2, tiene el mismo tamaño que las demas
Seria bueno que le colocaras un border: 0; a el card.
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 👇
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>.
Hola, ¿cómo puedo hacer que los badges se acomoden al centro o a la izquierda de la tarjeta?
corrección: *centro o a la derecha
En el div badges agregale la clase text-center o text-right
