Agregando un contenedor de ancho completo

Izael Ruelas Garcia

student•

es bueno agregar a los links que dirigen a un sitio diferente al nuestro la etiqueta target="_blank" para que el link se abra en otra pestaña del navegador y que el usuario continue en nuestro sitio.

<a href="https://es.wikipedia.org/wiki/Honolulu"class="btn btn-outline-light" target="_blank">Conoce más</a>```

Usuario anónimo

user•

¡Genial!, con ello no abandonarían nuestra web 😃
Buena práctica y muy oportuno compañero.

Jose L. Figueroa

student•

Cierto!!! Muy buena practica!!! Gracias

Sergio Toshio Minei

student•

Se puede usar px-0 en vez de pr-0 y pl-0.

De igual manera, se puede usar py en vez de pt y pb.

Christian

student•

Estoy enganchadísimo con el curso, great!

Marcelo Sulca Nieto

student•

Para quitar los padding en las columnas dejarlo en ‘0’ de col usar la clase
.no-gutters

<div class="row no-gutters">
            <div class="col-sm-6"></div>
            <div class="col-6"></div>
        </div>

Harold David Avila Sabogal

student•

buena información muchas gracias

Facundo Nicolás García Martoni

teacher•

Pero se debe tener en cuenta que "no-gutters" quita también los márgenes. Depende el caso 🤔

Christian David Sánchez

student•

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

Isaias Chávez

student•

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

Facundo Nicolás García Martoni

teacher•

Exacto, es lo que hice yo ;)

Enrique Garcia Stave

student•

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.

Juan Miguel Jimenez

student•

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

Harold David Avila Sabogal

student•

buena información muchas gracias

Pamela Cinthya Torres Gutiérrez

student•

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

Andrés David Loaiza Zamudio

student•

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

Gonzalo Pimentel

student•

Hasta ahora es un curso excelente!

Wilson Marino Pablo Mendez

student•

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

Harold David Avila Sabogal

student•

buena información muchas gracias

Fredy A. Yomayuza Colorado

student•

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.

Christian Velázquez

student•

Muy práctico utilizar bootstrap.

Juan Camilo Castillo Camacho

student•

Más que práctico.

Daniel Alejandro Salazar Martinez

student•

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.

Victor Manuel Ocampo Galvis

student•

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.

ivan dario castro

student•

Ahí vamos con el reto

Jonathan Solis

student•

Excelente idea!

ivan dario castro

student•

Muchas gracias jonathlan !

Jonathan Grimaldo Rodriguez

student•

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

Cristhian Camilo Perez Veloza

student•

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

Erika Luna

teacher•

con shift + 7

Christian Navarro Urra

student•

En mac igual funciona?

Agregando un contenedor de ancho completo

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