Agregando texto informativo del evento

Resumen

Ahora vamos a incluir un texto informativo sobre nuestro carousel de imágenes. Encuentra más información de los botones en https://getbootstrap.com/docs/4.1/components/buttons/

Jesús Abano Ferrara

student•

Si hicieron todo igual, pero el texto no se ve, prueben agregando:

    z-index: 1;

En la hoja de estilo en la sección #carousel .overlay. Esta propiedad sirve para controlar el orden de los elementos, mientras mayor es el valor, mayor es la prioridad.

Luis Rojas

student•

Gracias Jesús, ya no sabia que hacer. Me sirvió.

Samuel Zurisaday Rivera Bravo

student•

Buen aporte, gracias!

Sergio Díaz Fernández

student•

Si tienes problemas con el texto (No se queda fijo), te recomiendo utilizar z-index: 1 en tu css. Adjunto el código:

#carousel{
    position: relative;
}
#carousel .overlay {
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

Camilo Alexander Velandia Velandia

student•

gracias por el aporte

RobotistasMX

student•

Gracias por el aporte x2

Alberto Castro Flores

student•

en bootstrap v5 para alinear texto a la derecha es text-end

Jason Cruz Salazar

student•

Muchas gracias, me sirvió!

Daniel Franklin Chavez Sanchez

student•

gracias, a mi tambien me sirvió

HENRY DSANTIAGO

student•

Para quienes tengan problemas con el OVERLAY, se debe a que la versión que usa Sacha, es una versión más vieja del Bootstrap, así que debemos agregarle a nuestro overlay , el estilo z-index:1; Aquí les dejo el código:

#carousel .overlay {
    z-index: 1;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color:white;
}```

Stiven Jiménez

student•

gracias. estuve como media hora buscando por que no me funcionaba... <3

Renato Maximiliano Rivera Abad

student•

Gracias Bro ! 🤜🤛

Francisco Peñalo Feliz

student•

Si el texto del overlay no se muestra o se queda debajo del carousel la solución es agregar la clase carousel-caption al div que tiene la clase overlay quedando así:

<div class="overlay carousel-caption">
........
</div>

Jesus Alejandro Niño Moreno

student•

Muchisimas gracias por el aporte, ya me habia fijado que quedaba el texto detras y que era por el cambio que se habia hecho en el link que se trae del bootstrap que es distinto al del curso, pero no sabia como solucionarlo, gracias!

Francisco Peñalo Feliz

student•

No me gusto la solución que le daban en los comentarios poniendole un z-index para forzar que el div se muestre encima cuando en realidad Bootstrap tiene la clase carousel-caption para eso.

Entiendo que eso pasa porque desde la creación de este curso hasta la fecha cambiaron cosas en la librería de Bootstrap que afectan cosas hechas anteriormente y esta es una de ellas.

Roque Eduardo Gomez

student•

En lugar de poner en el .css

#carousel .overlay .container,
#carousel .overlay .container{
    height: 100%;
}

se puede usar la clase h-100 de bootstrap y poner el codigo asi:

<div class="container h-100">
<div class="row align-items-center h-100"> 
  <div class="col-md-6 offset-md-6 text-center text-md-right">
    <h1>Titulo</h1>
    <p class="d-none d-md-block">Descripcion</p>
  </div>
</div>

Luis Rojas

student•

correcto, si funciona! Gracias @roqueg1992

Javi Felices

student•

Muchas gracias por el aporte.

Fabián Ignacio Toro Riquelme

student•

Para aquellos que no les funciones (Como a mi) el tema del overlay, agregen " z-index: 1; " quedaría así #carousel .overlay{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); color: white; z-index: 1; }

Cristian Castillo

student•

Buena!! y como llegaste a esa solución??

Alejandro Cuellar

student•

Yo tenía el mismo error, en está página encontre información

https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp

Marino Checo

student•

Saludo, al momento de realizar este curso Bootstrap estaba en la v4.1 y yo al iniciar este curso estaba en la v4.3 al parecer una de las mejoras que se tiene es que hay una diferencia en lo que pasa en el minuto 9 al 11 en este video. Para hacer que el texto quede centrado verticalmente en el div del container que esta abajo del div overlay, le agregue lo siguiente d-flex h-100 align-items-center justify-content-center y al row le quite el align-items-center

      <div class="overlay">
        <div class="container d-flex h-100 align-items-center justify-content-center">
          <div class="row">
            <div class="col-md-6 offset-md-6 text-right">
              <h1>Tema</h1>
              <p>Texto
              </p>
              <a href="#">Otro info</a>
              <button type="button">Comprar</button>
            </div>
          </div>
        </div>
      </div>```

Javi Felices

student•

Gracias por la info :)

Onayker Bermúdez

student•

A mi me pasa que se me desaparece el texto (es decir no se queda fijo) y no se que hacer ayuda!

Fco Castro

student•

IMPORTANTE ACTUALIZACIÓN.
Texto No se Ve, se queda detrás del carrusel todo el rato.

Llevo toda la tarde perdida dando vueltas, viendo el código, comparando con el curso y resulta que lo tenía todo bien.

El tema es que ha habido, desde que se grabó el curso hasta ahora, una actualización que ha dado al traste con cómo se estaba ordenando el código.
Cuando se grabó el curso se cargaba este archivo:
.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

.
Y ahora, en las versiones actuales, el comportamiento no es el mismo.
Voy a ver si puedo modificarlo yo mismo. Agradecería que se tuviera en cuenta esta pregunta y que fuera respondida.
.
¿Cómo hago para modificar el código tal y como están las cosas ahora?

Fco Castro

student•

He tirado por la vía rápida y le he marcado un

z-index: 2;

al .overlay
.
Me fastidia un poco porque hubiera preferido conseguir una solución más técnica o más elegante que esta pero no voy a perder tiempo con esto.
Ala! a seguir hacia adelante.

Luis Andres Garcia Contreras

student•

Gracias amigo, ayudaste a un novato

ivan dario castro

student•

Listos mis 3 slides con Bootstrap

Julian David Alzate Cuervo

student•

genial!!!

Joel Dominguez Merino

student•

Hola Ivan! Te ha quedado increíble! El diseño de las imagenes hace que se vea una web muy llamativa. Gran trabajo!

Sabino Fernández

student•

Me está gustando mucho este curso :D

Jose Morales Varon

student•

Seguimos progresando, para los que no se les pueda visualizar el texto del overlay colocar la propiedad z-index:1; ✌

Usuario anónimo

user•

Claro... porque así ambos elementos (carousel y overlay) están ocupando la misma posición, pero es carousel quien toma por defecto por tener una posición absoluta.

Jairo Merea Dueñas

student•

IMPORTANTE

Text-right ya no sirve, ahora es "text-end"

Enrique Garcia Stave

student•

Algo de lo que se uso en esta clase: text-right: El texto que esta dentro del elemento se corre hacia la derecha. text-md-right: El texto se correrá a la derecha a partir de tamaños de pantalla medianos text-center: el texto se alineará al centro por defecto. offset: Corre los elementos hacia la derecha. Ejemplo: col-md-offset-6: Corre a partir de pantallas medianas, 6 elementos hacia la derecha. align-items-center: Las columnas dentro de la fila se alinean verticalmente al centro. **Nota: **Para poder centrar verticalmente, recordemos que la altura del container y del row ocupan su espacio mínimo, por lo que debemos apuntar a que ocupen el 100% del alto de su elemento padre (overlay), por lo que debemos ponerle un height del 100%. d-none: El elemento con esta clase tendrá un display: none por defecto. d-md-block: El elemento con esta clase añadida tendrá un display: block a partir de tamaños de pantalla medianos.

Flavio César Morales Anguiano

student•

Para los que tengan bootstrap 5:

<div class="overlay">
          <div class="container h-100">
            <div class="row d-flex align-items-center h-100">
              <div class="col-md-6 justify-content-center offset-md-6 text-end">

Julián Andrés Porras Beltrán

student•

Iván Exequiel Videla

student•

esta muy bueno! muy elegante!

Jose Colmenares

student•

Texto en el overlay:

<code>
Platzi Conf llega por primera vez a Hawaii! Un evento para compartir con nuestra comunidad el conocimiento y experiencia de los expertos que están creando el futuro del Internet. Ven a conocer a miembros del Team Platzi, a otros estudiantes de Platzi y a los oradores de primer nivel que tenemos para ti. Te esperamos!

Eliana Huamani

student•

Agrego que actualmente a la fecha mayo del 2020, he agregado este z-index:1000; en #carousel .overlay {}, esto hace que aparezca el overlay

David Felipe Mora Blanco

student•

Que gran aporte, pero donde conseguiste ese z-index?

Jose Colmenares

student•

Estoy viendo la documentación que también se su puede utilizar la clase "carousel-caption" para agregar texto por encima del carrusel

Camilo Andrés Pérez Galeano

student•

Min 9:06 Me di cuenta que con la clase

<div class="col-md-6 offset-md-6 text-right">

en BS 5, no me lo está tomando. Utilicé la clase

<div class="col-md-6 offset-md-6 text-end">

y sí me lo tomó

Luis Ernesto Guevara Rodriguez

student•

gracias camilo me sirvió tu aporte

#carousel{
    position: relative;
}
#carousel .overlay {
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

<div class="container h-100">
<div class="row align-items-center h-100"> 
  <div class="col-md-6 offset-md-6 text-center text-md-right">
    <h1>Titulo</h1>
    <p class="d-none d-md-block">Descripcion</p>
  </div>
</div>

      <div class="overlay">
        <div class="container d-flex h-100 align-items-center justify-content-center">
          <div class="row">
            <div class="col-md-6 offset-md-6 text-right">
              <h1>Tema</h1>
              <p>Texto
              </p>
              <a href="#">Otro info</a>
              <button type="button">Comprar</button>
            </div>
          </div>
        </div>
      </div>```

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="overlay">
          <div class="container h-100">
            <div class="row d-flex align-items-center h-100">
              <div class="col-md-6 justify-content-center offset-md-6 text-end">

<code>
Platzi Conf llega por primera vez a Hawaii! Un evento para compartir con nuestra comunidad el conocimiento y experiencia de los expertos que están creando el futuro del Internet. Ven a conocer a miembros del Team Platzi, a otros estudiantes de Platzi y a los oradores de primer nivel que tenemos para ti. Te esperamos!

Agregando texto informativo del evento

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