Agregando texto informativo del evento

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.

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

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

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

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>

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>

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

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

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

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

Listos mis 3 slides con Bootstrap

Me está gustando mucho este curso 😄

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

IMPORTANTE

Text-right ya no sirve, ahora es “text-end”

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.

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

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!

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

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

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ó

Cuánta versatilidad para poder colocar en la pantalla del navegador lo que se desea, con la precisión requerida, sobre todo sin caer, en requerir un tiempo y recursos excesivos.

Agreguen un z-index: 2; al .overlay y solucionan el problema que genero la actualización.

Texto

<<p>
 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 de 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!
</p>>

La version que se trabaja en el video es la 4.1.3, yo estuve todo el dia intentando poner el overlay sobre el carousel, y me di cuenta que a dia de hoy la version mas actual y con la que estoy trabajando es la 4.4.1 y al poner el overlay este queda detras del carousel

Soy el unico al que no le gusta esto de que todo este ya hecho, hasta el codigo HTML, se que esto va a ser funcional cuando estemos en proyectos grandes y también para conseguir trabajo, pero me parece re aburrido tener ya todo hecho.

Sin el uso de z-index no lo habría logrado hacer!!!

Si a pesar de poner correctamente

z-index:1;```
No se los muestra, probablemente estén poniendo una etiqueta mal o tengan mal posicionado el texto.
Yo había escrito **caroucel** en lugar de **carousel**
Y si hacía los cambios por que llamaba la clase .**overlay** también

A los que no se alinea el texto a la derecha con: text-md-right

Con bootstrap 5 es:

text-md-end

Para que el texto se alinea a la derecha en Bootrsap 5, hay que cambiar text-right por text-end. =)

<div class="col-md-6 offset-md-6 text-center text-md-end">
                    <h1>
                      Platiz Conf Hawuai
                    </h1>

Si tuvieron problemas como yo con el overlay, se debe a que no es una versión actualizada del Bootstrab, así que debemos agregar a nuestro overlay el estilo z-index:1;

Para poder centrar todo el texto y que este a la derecha tambien puedes usar display:grid

#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;
    display: grid;  
   
} 
#carousel .overlay .container{
    align-items: center;
    display: grid;
} 

La solución oficial que ofrece BootsTrap para el problema de que no se muestra el texto overlay sobre el carousel, es agreganddo al div del overlay la clase “carousel-caption” de esta forma:

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

La documentación oficial al respecto en este link https://getbootstrap.com/docs/4.0/components/carousel/#with-captions

Bootstrap me sorprende gratamente, facilita el hacerlas cosas, aunque siempre la parte artística la define el diseñador.

Impresionante clase !!! Me costó mucho conseguir los resultados pero me encantó.

📌En B.v.5 ya no se usan las direcciones left y right, solo se usan start y end en su lugar, asi que hay que considerar eso al momento de ir viendo el curso.

Por ejemplo text-md-right pasa a ser text-md-end. O cuando arreglamos el margin right por margin left del navegador, pasa a ser margin start y margin end.

Para los que tienen Bootstrap 5 y no les toma los estilos de texto a la derecha, simplemente cambien right por end y listo 😉

Para no tener problemas con el texto es importante darle prioridad al elemento del bloque en su indice.Por ende les dejo esto:

#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;
}

Mucho por experimentar con Bootstrap.

Para quienes estén usando Bootstrap 5:

En vez de text-right sería text-end.

Para más información:
https://getbootstrap.com/docs/5.0/utilities/text/

Si no les deja alinear el texto a la derecha, en vez de poner text-right, pongan text-end.

text-right a partir de la v5.0 ya no se utiliza. Ahora lo reemplazamos con text-end

Texto

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

Si el “d-none” no les funcionan solo tienen que poner “d-none d-sm-block”

Tengo un problema.
Al momento de poner el texto, lo pone entre las imágenes, es decir, pasa imagen, se ve (casi nada) el texto y fondo gris y se pone la siguiente imagen.

¿Alguien sabe por qué pasa esto?

Otra opcion para no crear esa div overlay es usar Image overlay, dejo link:
https://getbootstrap.com/docs/4.3/components/card/#image-overlays

Es bueno repasar lo del offset, en su momento lo aprendí por la documentación, pero es bueno refrescarlo…

Saludos, para agregarle un texto diferente a cada imagen del carousel,realice estos cambios pero no cambia de color.
HTMl:

<div class="carousel-item">
              <img src="assets/images/imagen3.jpg" class="d-block w-100" alt="imagen 3">
              <div class="carousel-caption d-none d-md-block">
              <h5 class="texto">Third slide label</h5>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
            </div>```
 
CCS:
.texto {
  color: white;

que frameworck tan interesante

Para los que están utilizando la versión 5.3 de Bootrstrap y el texto no les alinea hacia la derecha, deben utilizar la clase “text-end” en vez de utilizar “text-right”

si usan Boostrap 5.1 y el texto no se les alinea como en el video es porque la alineacíon del texto a la izquierda paso de ser text-right a text-end quedando así el div:

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

Sección de texto informativo agregado 😎
🌐 Les comparto mi código: https://github.com/iJCode1/bootstrap4_platzi
.
Resultado:

Creo es que es mejor en la etiqueta <p></p> colocar la clase d-ms-block en lugar de d-md-block

Me encanta la manera de explicar de este profesor. Verdaderamente aprendes mucho mientras vas siguiendo el ejemplo que realiza.

Para enviar el texto a la derecha utilizen text-end

Si estas usando la version 5 de bootstrao no te funcionara si usas el

text-right,

a partir de la version 5 se usa
en bootstrap v5 para alinear texto a la derecha es

text-end

Super desactualizado ya este curso

**TEXT-RIGHT **

Si tienes algún problema con mandar el texto a la derecha con Text-right. Intenta usar text-end. Seguro que te funcionara.
Al parecer, es por las versiones de bootstrap. El profe usa version 4 pero actualmente es la 5 y puede por culpa de esto no te funcione.

f

el height se pronuncia “jait”, no “jeigt”.

Así va quedando

Estoy muy muy atascado. El título de Plazti Conf, el h1, me sale todo el rato detrás de las imágenes. No avanzo nada.

Estoy muy muy atascado. El título de Plazti Conf, el h1, me sale todo el rato detrás de las imágenes. No avanzo nada.

Excelente Observación

Hola, ¿alguien más tiene problemas con la imagen de Hawaii 3? me aparece rota.

Yo tuve problemas para poder ingresar el texto encima de las imagenes del carousel. No obstante cree un nuevo estilo y le di las siguientes caracteristicas

.carousel-content {
position: absolute;
bottom: 10%;
left: 5%;
z-index: 20;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

Quien Puede ayudarme le agradezco,

,el texto y el link mas el botón que aparece sobre las imágenes, no, me aparecen , están ahí , pero esta como por detrás de las imágenes solo se logra ver al momento de que se cambia de imagen , pero enseguida se oculta mientras la siguiente imagen aparece

Que intensidad !!!

Tengo una duda. Ultimamente no se si sea el navegador o algo, pero las animaciones css no se muestran bien, por ejemplo el efecto fade no funciona (sin tocar nada del código del bootstrap e instalar todo tal cual) ¿Alguien sabe que puede estar ocurriendo?. De un día para otro comenzó a fallar, gracias por su ayuda.

Una pregunta, si es una imagen con texto lo que quieres añadir en el overlay?, como se hace para que este se haga pequeño y no colapse con los demás elementos al hacer el window más pequeño?

Documentación url

https://getbootstrap.com/docs/4.1/components/buttons/

perfecto el proyecto funciona igual que el de sacha hasta el momento.

Tengo el texto alineado a la izquierda, pero queda muy despegado… Alguien sabe como mandarlo más a la izquierda?

Saludos =)

Interesante

Overlay

Demasiado buen curso en verdad. Claro en los conceptos y práctico

z-index: 1;

Genial gran clase, muy claros los conceptos

Solo recalcar algo del código de css

la linea del overlay —> background-color: rgba(0, 0, 0, 0.5);
no cumple ninguna función podemos comentarla y el resultado será el mismo

#main .carousel-inner img {
  max-height:  70vh;
  object-fit: cover;
  filter: grayscale(70%);
}

#carousel {
  position: relative;
}

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

Pero hay otra que si incluye la linea background-color: rgba(0, 0, 0, 0.5); pero tenemos que agregar la linea z-index: 2000; y quitando la linea "filter: grayscale(70%); "

#main .carousel-inner img {
  max-height:  70vh;
  object-fit: cover;
  /*filter: grayscale(70%);  */
}

#carousel {
  position: relative;
}

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

Espero que entiendan lo que quise explicar

saludos

Genial!

Excelente Clase ❤️

Ohhh Bootstrap es interesante 😄

woooooooooooooooooooooooooooooo no conocia esas clases!

Parece algo de ensueño esto lo de Bootstrap definitivamente lo usaré!

Esta brutal conocer todo el poder que tiene bootstap y ver como se aplica a un proyecto real.

Con esto me funciono la alineación vertical
#carousel .overlay .container,
#carousel .overlay .container .row
{
height: 100%;
}

Dice como ocultar elementos, como si fuera un @media.

Excelente clase, bootstrap cumple con su funcionalidad de gran manera.

El truco esta en llevar en la SANGRE las clases de BOOTSTRAP !! 😂😅

excelente, conociendo términos que desconocía D

Hola mi gente al colocar la clase carousel-caption (boostrap) al lado de la clase overlay ya le agrega los estilos para que el texto se muestre encima de la imágenes.

Saludos desde República Dominicana

HTML

 <!-- agregando texto informatio del evento -->
              <div class="overlay">

                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-md-6 offset-md-6 text-center text-md-end">
                            <h2>EUROFIGHTER GALLERY</h2>
                            <p class="d-none d-md-block">The world's most modern swing-role fighter</p>
                            <a href="#" class="btn btn-outline-light" data-toggle="modal">Ser parte</a>
                            <button type="button"  class="btn btn-platzi" data-toggle="modal" data-target="#modalCompra">Comprar</button>
                        </div>
                    </div>
                </div>

              </div>

CSS

/* agregando texto informativo del evento */

#carousel-fade {
    position: relative;
   
}

#carousel-fade .overlay {
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--carousel-bg-color);
    color: var(--just-white);
    
}

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

En Bootstrap 5.0 para alinear el texto a la derecha ya no se hace con text-right sino con text-end, asi:

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

`Hola!!
Alguien sabe por qué, cuando pongo “text-right” como ha dicho el profe, el texto no se pone a la derecha. No hace nada. Tengo el codigo igual que el.

Gracias!!!

Hay que ver la clase y respaldar la info con la documentación oficial de Bootstrap porque obvio con cada actualización se generan cambios