Agregando un contenedor de ancho completo

Hola! Creo que Sacha se pudo haber ahorrado los estilos CSS que puso:

• Para la imagen ancho 100% basta con agregarle .img-fluid

• En la columna puede ahorrse pl-0 y pr-0 con solo ```p-0``

• Y, el color negro de fondo con bg-dark y pueden usar también text-light o text-white

<div class="container-fluid bg-dark text-light">
	<div class="row">
        	<div class="col p-0">
          	<img class="img-fluid" src="assets/images/honolulu.jpg" alt="Honolulu">
         	</div>
          <div class="col">
            	Columna 2
          </div>
	</div>
</div>

Pueden checar más de esto en las Utilidades de Bootstrap ⬅️

Estoy enganchadísimo con el curso, great!

Propiedades de espaciado

m - para las clases que establecen margin

p - para las clases que establecen padding

Donde los lados es uno de:

t- para las clases que establecen margin-top o padding-top

b- para las clases que establecen margin-bottom o padding-bottom

l- para las clases que establecen margin-left o padding-left

r- para las clases que establecen margin-right o padding-right

Si iba a ocupar el mismo color que el nav, pudo usar la clase bg-dark también no?

Apuntes:
Se puede cambiar la configuración del container para que ocupe todo el ancho el viewport, a traves de la clase “container-fluid".

pr-[numero]: el elemento tendrá un padding-right dependiendo del número que asignemos.
pl-[numero]: El elemento tendrá un padding-left dependiendo del número que asignemos.
pb-[numero]: el elemento tendrá un padding-bottom dependiendo del número que asignemos.
pt-[numero]: El elemento tendrá un padding-top dependiendo del número que asignemos.

Cuando usamos pt-4 y pb-4 con el mismo valor se puede sustituir por py-4, de manera similar para pl-0 y pr-0 se pueden cambiar por px-0

En Bootstrap 5:
m - para margin
p - parapadding
x - seleccionar ambos *-left and *-right
y - seleccionar ambos *-top and *-bottom
blank - seleccionar los 4 lados al mismo tiempo

Hasta ahora es un curso excelente!

listo, excelente clase esto de la filas y las columnas en lo particular me encanta porque se ve genial en cualquier tamaño de dispositivo

Sección de Lugar y Fecha terminada 🙌🏻
🌐 Código del proyecto en GitHub: https://github.com/iJCode1/bootstrap4_platzi
.
Resultado:

.
Móvil:

px-0 quita los paddings del eje x (left and right).

me acabo de dar cuenta de que nuestro profe es el tutor de la cocina del código, llevo todo el curso mirandolo y mensanso, su cara me suena 😮

Contenido por la mitad, no enseño como centrar contenido en X e Y el botón en dispositivo pequeño esta alineaedo a la izquierda cuando debería quedar en el centro…

Contenedor Ancho Completo

Para los que en bootstrap 5 no les quede el pl-0 y pr-0 cambienlos por ps-0 y pe-0, son los equivalentes en bootstrap 5

Hola, ahora con bootstrap 5, puedes hacer los cambios de la siguiente manera:

En la columna puede colocar px-0, en vez de pl-0 y pr-0 ya con eso indica que los cambios son para ambos lados, de igual forma si fuera el cambio para pt y pb lo podria colocar py-0.

Para darle a la imagen un ancho 100% puedes agregarle .img-fluid

Ahí vamos con el reto

Abreviatura emmet:

section#place-time>.container-fluid>.row>.col*2>img

ps padding start
pe padding end

ps-0 pe-0 Bootstrap 5 (padding-start/padding-left) - (padding-end/padding-right)

Buenas, como recomendación si desean darle el ancho maximo a la imagen de Honolulu , no se acostumbren a darle el style con el id , mejor usen una clase asi lo hice yo
Html
<img class=“img-honolulu” src=“assets/images/honolulu.jpg” alt=“Honolulu”>
Css
.img-honolulu{
max-width: 100%;
}
Obtendran un mejr resultado y una mejor practica en codigo.

Vamos bien…

También puedes agregar el alineado al “row” de esta manera para que que bien

<!-- place time -->
    <section id="place-time">
      <div class="container-fluid bg-dark">
        <div class="row align-items-center">
          <div class="col-md-12 col-lg-6 pl-0 pr-0">
            <img class="img-fluid" src="./assets/images/honolulu.jpg" alt="">
          </div>
          <div class="col-md-12 col-lg-6 text-center p-4">
            <h2>Honolulú - Octubre 2025</h2>
            <p>
              Honolulu, en la costa sur de la isla de Oahu, es la capital de Hawái y la vía de acceso a la cadena de islas de EE.UU. El barrio de Waikiki es un centro de restaurantes, vida nocturna y comercio, famoso por su icónica playa con forma de medialuna bordeada de palmeras y hoteles de muchos pisos y con el cráter volcánico Diamond Head en lo alto a la distancia. Los sitios relacionados con el ataque a Pearl Harbor en la Segunda Guerra Mundial incluyen el USS Arizona Memorial.
            </p>
            <button class="btn btn-outline-light">Conoce más</button>
          </div>
        </div>
      </div>
    </section>

¿Como se ponen las lineas de comentario rápidamente?

En Bootstrap 5 para el padding top y bottom usar py, para padding left and right usar px
para solo left usar ps y pe para right.

Hola! Curiosiando un poco vi que en vez de ocupar
doble el pt-2 y pb-2, esto se puede resumir con sus ejes.
Se puede ocupar

py-2 px-2 

e incluye ambos padding top y bottom. Lo mismo con px que incluye derecha e izquierda. A nunca parar de aprender 😃

Muy práctico utilizar bootstrap.

Dentro de la etiqueta <a> se puede colocar: target="blanck para abrir otra pestaña referente al tema al dar clic sobre el boton y no quede sobre la misma que estamos navegando.

Para que la imagen sea responsive se le puede simplemente poner la clase “img-fluid”

                    <img src="img/honolulu.jpg" class="img-fluid">

Genial esta herramienta, el mamaño que tenian mis hojas de estilo antes de esto, sin contar el tiempo que le ahorra a uno.

Más que práctico.

En que casos utilizo el container fluid o el container ?

Faltan 5 años de ser esa conferencia, quiere decir que será después que salgamos de cuarentena JAJAJAJAJA.

Aprendiendo en cuarentena con Platzi 2020.

href="#"?

Yo conocia otra Grilla

El curso está estupendo. En mi caso utilicé w-100 y h-100 para que la imagen ocupe el 100 del tamaño de su contenedor en todos los tipos de pantalla

<section id="place-time">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12 col-md-6 px-0">
              <img class="w-100 h-100" src="assets/img/honolulu.jpg" alt="honolulu">
            </div>
            <div class="col-12 col-md-6 bg-dark text-bg-dark">
              <h2 class="mb-4 mt-2">Honolulu Noviembre - 2022</h2>
              <p class="mb-2">Honolulu o Honolulú es la capital y localidad más grande del estado de Hawái, en los Estados Unidos. Honolulu es la más sureña de entre las principales ciudades estadounidenses. Aunque el nombre de Honolulu se refiere al área urbana en la costa sureste de la isla de Oahu, la ciudad y el condado de Honolulu han formado una ciudad-condado consolidada que cubre toda la isla (aproximadamente 600 km² de superficie).</p>
              <a class="btn btn-outline-light mb-3" href="https://es.wikipedia.org/wiki/Honolulu">Conoce más</a>
            </div>
          </div>
        </div>
      </section>

En bootstrap 5.0 en lugar de padding left o padding right
se utiliza paddin end o padding start. De modo que las clases para eliminar el paddin derecho e izquierdo quedan de esta forma:

class=“col ps-0 pe-0”>

HTML

   <!-- PLACE AND DATE -->

    <section id="place-time">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 col-lg-6 pt-3 pl-0 pr-0"> <!-- padding left padding right -->
            <img src="assets/img/honolulu.jpg" alt="City"></div>
          
          <div class="col-12 col-lg-6 pt-4 pb-4 align-self-center">
            <h2 >
              HONOLULU OCTUBRE 3021
            </h2>
            <p>
              The Eurofighter Typhoon is the world's most modern swing-role fighter.
            </p>
            <a href="#" class="btn btn-outline-light" target="_blank">Conoce más</a>
          </div>
        </div>
      </div>
    </section>

    <!-- PLACE AND DATE --> 

CSS

/* place and date */

#place-time {
    background-color: var(--secondary-color);
    color: var(--just-white);
}


#place-time img{
    max-width: 100%;
}

/* place and date */

les dejo mi github, me siguen y les sigo!

https://github.com/ruben-xe

Excelente video!

excelente explicación!!!

Interesante.!

Muy buena clase.

Consulta, mis card en md no se ven centradas, alguna clase style que me puedan recomendar para lograrlo?

<div class="row mt-3 text-center">
        <div class="col">
          <h3>RECETAS RELACIONADAS</h3>
        </div>
      </div>

      <div class="row mt-3">
        <div class="col-lg-4 col-md-12">
          <div class="card" style="width: 18rem;">
            <img src="./assets/img/recipe-card-1.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</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>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12">
          <div class="card" style="width: 18rem;">
            <img src="./assets/img/recipe-card-2.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</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>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12">
          <div class="card" style="width: 18rem;">
            <img src="./assets/img/recipe-card-3.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</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>
            </div>
          </div>
        </div>
      </div>```

Excelente resultado !!!

hummm una pregunta … desarrollar en bootstrap es “facil”, como lo hacen parecen con este curso, o es que solo muestran lo mas basico aqui, y que realmente el desarrollo profesional es mas complejo que esto…
agradecería sus respuestas

Pueden usar py (Para Padding Top y Bottom en otras palabras en el eje de las Y) y px (Para Padding Left y Right en el eje de las X) Funciona igual para Margin

.conatiner-fluid

Excelente… ❤️

Ese texto también hay que arreglarlo.

Genial boostrap es una excelente herramienta

<section id="place-time">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12  col-lg-6 pl-0 pr-0">
           <img src="assets/images/unnamed.jpg" alt="">
          </div>
          <div class="col-12 col-lg-6 pt-2 pb-4">
            <h2 >Honolulu - octubre 2025</h2>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
            <a class="btn btn-outline-light " href="https://www.lipsum.com/">Conoce Más</a>
          </div>
        </div>
      </div>
    </section>```

Hasta el momento todo súper bien

Pregunta, ¿Cómo centro solamente el botón?

increible la utilidad de bootstrap

+++2

Super genial! La grilla de bootstrap es lo mejor que existe

<section id="place-time">
  <div class="container-fluid">
    <div class="row">
      <div class="col col-12 col-lg-6 pl-0 pr-0">
        <img src="images/honolulu.jpg" alt="Honolulu"> 
      </div>
      <div class="col col-12 col-lg-6 pt-4 pb-4">
        <h2 class="mt-2">Honolulu - Octubre 2025</h2>
        <p>Honolulu u Honolulú2​ es la capital y localidad más grande del estado de Hawái, 
          en los Estados Unidos.nota 1​ Honolulu es la más sureña de entre las principales ciudades estadounidenses. 
          Aunque el nombre de Honolulu se refiere al área urbana en la costa sureste de la isla de Oahu, la ciudad y 
          el condado de Honolulu han formado una ciudad-condado 
          consolidada que cubre toda la isla (aproximadamente 600 km² de superficie).</p>
          <a href="https://es.wikipedia.org/wiki/Honolulu" class="btn btn-outline-light">Conoce más</a>
        </div>
    </div>
  </div>

</section>

en place-time tambien podiamos usar la clase w-100

Una clase muy entretenida 😄

Excelente Bootstrap.

Bootstrap ayuda mucho en el desarrollo de una página web.

Buena clase

Hay alguna manera de decirle al img que cargue una imagen “Foto no encontrada” , en caso de que el atributo src tenga definida una ruta a una imagen que no exista??

Para que no batallen, aquí está la imagen de honolulu
github

Buena Clase.

Con Bootstrap queda un css mas entendible, ya que se trabaja mas sobre un estándar de clases que definir a nuestra percepción los elementos en el css, aunque el html queda mas largo.

Hola aquí quedo mi aporte:

#1
Puedes sustituir

	<div class="col pl-0 pr-0">
            <img src="assets/images/honolulu.jpg" alt="honolulu">
          </div>

Por

	<div class="col px-0">
            <img src="assets/images/honolulu.jpg" alt="honolulu">
          </div>

Que hace referencia al padding en el “eje” x osea padding-left y padding-rigth

Para hacer los padding left (ps) y right (pe) en boostrap 5 seran de la siguiente manera.

<code> 
<div class="col ps-0 pe-0">

aun no le entiendo bien a la grilla, me gusta mas css grit layout

Chicos si usted usan VSC utilicen .“nombre de la clase” y les saldra el div con la clase que quiere.
Ejemplo

.honolulu

Dan enter

<div class="honolulu"></div>

excelente!!!

<div class="container-fluid">
  ...
</div>

Gracias !!!

f