No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
6H
22M
32S

Agregando un contenedor de ancho completo

14/21
Recursos

Aportes 76

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渃ontainer-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=鈥渋mg-honolulu鈥 src=鈥渁ssets/images/honolulu.jpg鈥 alt=鈥淗onolulu鈥>
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 鈥渞ow鈥 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 鈥渋mg-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=鈥渃ol 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 !!!

A煤n falta acomodar el height de las cards

hummm una pregunta 鈥 desarrollar en bootstrap es 鈥渇acil鈥, 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 鈥淔oto 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 鈥渆je鈥 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 .鈥渘ombre 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