CursosEmpresasBlogLiveConfPrecios

Agregando un contenedor de ancho completo

Clase 14 de 21 • Curso de Bootstrap 4

Clase anteriorSiguiente clase

Contenido del curso

Introducción al curso
  • 1

    Repositorio del curso de bootstrap

    00:15
  • 2
    Bootstrap 4 ¿Qué trae de nuevo esta versión?

    Bootstrap 4 ¿Qué trae de nuevo esta versión?

    03:23
  • 3
    ¿Que es un framework de frontend?

    ¿Que es un framework de frontend?

    02:45
  • 4
    Nuestro Proyecto: Hola Mundo de Bootstrap

    Nuestro Proyecto: Hola Mundo de Bootstrap

    02:34
Creando el sitio web
  • 5
    La grilla de Bootstrap

    La grilla de Bootstrap

    12:09
  • 6
    Reto: La grilla de Bootstrap

    Reto: La grilla de Bootstrap

    05:43
  • 7
    El footer

    El footer

    10:38
  • 8
    El header de nuestro sitio

    El header de nuestro sitio

    13:18
  • 9
    Creando un carousel de imágenes

    Creando un carousel de imágenes

    07:58
  • 10
    Agregando texto informativo del evento

    Agregando texto informativo del evento

    12:51
  • 11
    Agregando botones

    Agregando botones

    04:42
  • 12
    Las cards de Bootstrap 4

    Las cards de Bootstrap 4

    11:44
  • 13
    Pastillas de texto

    Pastillas de texto

    04:38
  • 14
    Agregando un contenedor de ancho completo

    Agregando un contenedor de ancho completo

    12:26
  • 15
    Los formularios de Bootstrap 4

    Los formularios de Bootstrap 4

    15:43
  • 16
    Agregando un tooltip

    Agregando un tooltip

    04:07
  • 17
    Scrollspy: Conociendo la ubicación del usuario en el header

    Scrollspy: Conociendo la ubicación del usuario en el header

    07:23
  • 18
    Agregando un modal para comprar tickets

    Agregando un modal para comprar tickets

    04:47
  • 19
    Un nuevo formulario para completar la compra

    Un nuevo formulario para completar la compra

    04:40
Deploy a producción
  • 20
    Poniendo nuestro sitio en producción

    Poniendo nuestro sitio en producción

    04:08
  • 21
    Conclusiones del curso

    Conclusiones del curso

    00:51
    Izael Ruelas Garcia

    Izael Ruelas Garcia

    student•
    hace 7 años

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

      Jaime Diaz

      student•
      hace 7 años

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

      Jose L. Figueroa

      Jose L. Figueroa

      student•
      hace 7 años

      Cierto!!! Muy buena practica!!! Gracias

    Sergio Toshio Minei

    Sergio Toshio Minei

    student•
    hace 7 años

    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

    Christian

    student•
    hace 5 años

    Estoy enganchadísimo con el curso, great!

    Marcelo Sulca Nieto

    Marcelo Sulca Nieto

    student•
    hace 7 años

    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

      Harold David Avila Sabogal

      student•
      hace 7 años

      buena información muchas gracias

      Facundo Nicolás García Martoni

      Facundo Nicolás García Martoni

      teacher•
      hace 6 años

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

    Christian David Sánchez

    Christian David Sánchez

    student•
    hace 6 años

    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

    Isaias Chávez

    student•
    hace 7 años

    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

      Facundo Nicolás García Martoni

      teacher•
      hace 6 años

      Exacto, es lo que hice yo ;)

    Enrique Garcia Stave

    Enrique Garcia Stave

    student•
    hace 6 años

    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

    Juan Miguel Jimenez

    student•
    hace 7 años

    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

      Harold David Avila Sabogal

      student•
      hace 7 años

      buena información muchas gracias

    Pamela Cinthya Torres Gutiérrez

    Pamela Cinthya Torres Gutiérrez

    student•
    hace 6 años

    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

    Andrés David Loaiza Zamudio

    student•
    hace 5 años

    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

    Gonzalo Pimentel

    student•
    hace 5 años

    Hasta ahora es un curso excelente!

    Wilson Marino Pablo Mendez

    Wilson Marino Pablo Mendez

    student•
    hace 7 años

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

      Harold David Avila Sabogal

      Harold David Avila Sabogal

      student•
      hace 7 años

      buena información muchas gracias

    Fredy A. Yomayuza  Colorado

    Fredy A. Yomayuza Colorado

    student•
    hace 6 años

    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

    Christian Velázquez

    student•
    hace 6 años

    Muy práctico utilizar bootstrap.

    Juan Camilo Castillo Camacho

    Juan Camilo Castillo Camacho

    student•
    hace 6 años

    Más que práctico.

    Daniel Alejandro Salazar Martinez

    Daniel Alejandro Salazar Martinez

    student•
    hace 5 años

    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

    Victor Manuel Ocampo Galvis

    student•
    hace 4 años

    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

    ivan dario castro

    student•
    hace 4 años

    Ahí vamos con el reto

    reto.png
      Jonathan Solis

      Jonathan Solis

      student•
      hace 4 años

      Excelente idea!

      ivan dario castro

      ivan dario castro

      student•
      hace 4 años

      Muchas gracias jonathlan !

    Jonathan Grimaldo Rodriguez

    Jonathan Grimaldo Rodriguez

    student•
    hace 4 años

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

    Cristhian Camilo Perez Veloza

    Cristhian Camilo Perez Veloza

    student•
    hace 7 años

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

      Erika Luna

      Erika Luna

      teacher•
      hace 7 años

      con shift + 7

      Christian Navarro Urra

      Christian Navarro Urra

      student•
      hace 7 años

      En mac igual funciona?

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads