Tamaño ancho y alto

Utilidades básicas de width y height

Bootstrap ofrece un conjunto de utilidades de dimensiones que te permiten controlar el ancho y alto de los elementos de forma rápida y consistente. Estas clases siguen una nomenclatura intuitiva que facilita el desarrollo y mantiene la coherencia visual en toda la aplicación.

Clases de ancho (width)

Las utilidades de ancho utilizan el prefijo w- seguido de un valor que representa el porcentaje del contenedor padre:

<div class="w-25 bg-primary text-white p-2">Ancho 25%</div>
<div class="w-50 bg-secondary text-white p-2 mt-2">Ancho 50%</div>
<div class="w-75 bg-success text-white p-2 mt-2">Ancho 75%</div>
<div class="w-100 bg-danger text-white p-2 mt-2">Ancho 100%</div>

Las opciones disponibles para width incluyen:

• w-25: 25% del ancho del contenedor
• w-50: 50% del ancho del contenedor
• w-75: 75% del ancho del contenedor
• w-100: 100% del ancho del contenedor (ancho completo)
• w-auto: Ancho automático basado en el contenido

Clases de alto (height)

De manera similar, las utilidades de altura emplean el prefijo h- para definir el alto de los elementos:

<div style="height: 200px;" class="bg-light border">
  <div class="h-25 bg-primary text-white p-2">Alto 25%</div>
  <div class="h-50 bg-secondary text-white p-2">Alto 50%</div>
  <div class="h-75 bg-success text-white p-2">Alto 75%</div>
  <div class="h-100 bg-danger text-white p-2">Alto 100%</div>
</div>

Las opciones de altura siguen el mismo patrón:

• h-25: 25% del alto del contenedor
• h-50: 50% del alto del contenedor
• h-75: 75% del alto del contenedor
• h-100: 100% del alto del contenedor
• h-auto: Alto automático según el contenido

Utilidades de máximo ancho y alto

Bootstrap también incluye utilidades de límites máximos para controlar las dimensiones máximas de los elementos:

Máximo ancho (max-width):

<div class="mw-100 bg-primary text-white p-2">
  Este contenido no superará el 100% del ancho disponible
</div>

Máximo alto (max-height):

<div class="mh-100 bg-secondary text-white p-2" style="height: 300px;">
  Este contenido no superará el 100% del alto disponible
</div>

Casos prácticos de uso

Las utilidades de dimensiones son especialmente útiles en situaciones cotidianas de desarrollo:

1 - Columnas flexibles en contenido:

<div class="d-flex gap-3">
  <div class="w-25 bg-primary text-white p-3">Sidebar</div>
  <div class="w-75 bg-light p-3">Contenido principal</div>
</div>

2 - Elementos de interfaz proporcionales:

<div class="w-50 mx-auto">
  <img src="imagen.jpg" class="w-100 h-auto" alt="Imagen responsive">
  <div class="w-100 bg-success text-white text-center p-2 mt-2">
    Imagen centrada con ancho del 50%
  </div>
</div>

3 - Controles de altura en contenedores:

<div class="h-25 bg-info text-white p-3 mb-3">
  Sección con altura controlada
</div>
<div class="h-50 bg-warning text-dark p-3">
  Sección que ocupa la mitad del contenedor
</div>

Comportamiento con diferentes elementos

Las utilidades funcionan de manera consistente independientemente del elemento HTML utilizado:

<!-- En elementos de bloque -->
<div class="w-75 bg-primary text-white p-2">Div con ancho 75%</div>

<!-- En elementos de imagen -->
<img src="ejemplo.jpg" class="w-50 h-auto" alt="Imagen redimensionada">

<!-- En elementos de formulario -->
<input type="text" class="form-control w-25" placeholder="Input estrecho">

<!-- En botones -->
<button class="btn btn-success w-100">Botón de ancho completo</button>

Estas utilidades proporcionan una base sólida para el control de dimensiones, permitiendo crear layouts flexibles y mantener proporciones consistentes sin necesidad de escribir CSS personalizado.

Dimensiones responsive y viewport

Bootstrap proporciona utilidades responsive que adaptan las dimensiones de los elementos según el tamaño de pantalla, junto con unidades viewport que ofrecen un control más preciso sobre el espacio visual disponible.

Utilidades responsive por breakpoints

Las clases de dimensiones pueden aplicarse de forma condicional según los breakpoints de Bootstrap, permitiendo que los elementos cambien de tamaño automáticamente en diferentes dispositivos:

<div class="w-100 w-md-75 w-lg-50 bg-primary text-white p-3">
  <!-- Móvil: 100% | Tablet: 75% | Desktop: 50% -->
  Elemento que se adapta según el dispositivo
</div>

Patrón de nomenclatura responsive:

• w-{breakpoint}-{size}: Ancho responsive
• h-{breakpoint}-{size}: Alto responsive

Los breakpoints disponibles incluyen sm, md, lg, xl y xxl:

<div class="container-fluid">
  <div class="w-100 w-sm-75 w-md-50 w-lg-25 bg-success text-white p-2 mb-2">
    Ancho progresivamente menor en pantallas grandes
  </div>
  <div class="w-25 w-md-50 w-lg-75 w-xl-100 bg-info text-white p-2">
    Ancho progresivamente mayor en pantallas grandes
  </div>
</div>

Casos prácticos responsive

1 - Sidebar adaptable:

<div class="d-flex flex-column flex-md-row">
  <nav class="w-100 w-md-25 bg-dark text-white p-3">
    <h5>Navegación</h5>
    <p>En móvil ocupa todo el ancho, en tablet/desktop solo 25%</p>
  </nav>
  <main class="w-100 w-md-75 bg-light p-3">
    <h4>Contenido principal</h4>
    <p>Se adapta automáticamente al espacio restante</p>
  </main>
</div>

2 - Galería de imágenes responsive:

<div class="row">
  <div class="col-12">
    <img src="imagen1.jpg" class="w-100 w-sm-50 w-lg-25 mb-2" alt="Imagen 1">
    <img src="imagen2.jpg" class="w-100 w-sm-50 w-lg-25 mb-2" alt="Imagen 2">
    <img src="imagen3.jpg" class="w-100 w-sm-50 w-lg-25 mb-2" alt="Imagen 3">
    <img src="imagen4.jpg" class="w-100 w-sm-50 w-lg-25 mb-2" alt="Imagen 4">
  </div>
</div>

Unidades viewport

Las unidades viewport proporcionan dimensiones basadas en el tamaño total de la ventana del navegador, independientemente del contenedor padre:

Viewport width (vw):

<div class="vw-100 bg-primary text-white text-center p-3">
  Ocupa el 100% del ancho de la ventana del navegador
</div>

Viewport height (vh):

<div class="vh-100 bg-secondary text-white d-flex align-items-center justify-content-center">
  <h2>Sección de altura completa de pantalla</h2>
</div>

Utilidades viewport disponibles:

• vw-100: 100% del ancho de la ventana
• vh-100: 100% del alto de la ventana
• min-vw-100: Ancho mínimo del 100% del viewport
• min-vh-100: Alto mínimo del 100% del viewport

Diferencias clave: porcentajes vs viewport

Dimensiones por porcentaje (w-, h-):

• Se basan en el contenedor padre
• Ideales para layouts internos y componentes
• Respetan los límites de contenedores con padding/margin

<div class="container p-5 bg-light">
  <div class="w-50 bg-primary text-white p-2">
    50% del contenedor (no de la ventana completa)
  </div>
</div>

Dimensiones viewport (vw-, vh-):

• Se basan en la ventana del navegador completa
• Útiles para secciones hero, fondos completos
• Pueden extenderse más allá de contenedores

<div class="container p-5 bg-light">
  <div class="vw-100 bg-danger text-white p-2">
    100% de la ventana (se extiende fuera del contenedor)
  </div>
</div>

Aplicaciones prácticas de viewport

1 - Sección hero de pantalla completa:

<section class="vh-100 vw-100 bg-dark text-white d-flex align-items-center justify-content-center">
  <div class="text-center">
    <h1 class="display-1">Bienvenido</h1>
    <p class="lead">Sección que ocupa toda la pantalla</p>
  </div>
</section>

2 - Layout con altura mínima garantizada:

<div class="min-vh-100 d-flex flex-column">
  <header class="bg-primary text-white p-3">Header</header>
  <main class="flex-grow-1 bg-light p-4">
    <p>El contenido principal siempre tendrá al menos la altura de pantalla</p>
  </main>
  <footer class="bg-dark text-white p-3">Footer</footer>
</div>

Combinando responsive y viewport

Puedes combinar ambos enfoques para crear diseños sofisticados que se adapten tanto al dispositivo como al espacio disponible:

<div class="vh-100 d-flex flex-column">
  <div class="w-100 h-25 bg-primary text-white p-3 d-flex align-items-center justify-content-center">
    <h3>Header - 25% altura viewport</h3>
  </div>
  <div class="w-100 w-lg-75 mx-auto h-50 bg-light p-3 d-flex align-items-center justify-content-center">
    <p>Contenido - 50% altura, 75% ancho en desktop</p>
  </div>
  <div class="w-100 h-25 bg-dark text-white p-3 d-flex align-items-center justify-content-center">
    <h3>Footer - 25% altura viewport</h3>
  </div>
</div>

Esta combinación de utilidades responsive y viewport te permite crear interfaces que se adaptan elegantemente tanto al tamaño del dispositivo como al espacio visual disponible, proporcionando experiencias optimizadas en cualquier pantalla.

Proporciones y sizing avanzado

Bootstrap incluye utilidades avanzadas de proporciones que permiten mantener relaciones de aspecto específicas en los elementos, junto con herramientas de ajuste que proporcionan control granular sobre cómo el contenido se adapta a sus contenedores.

Utilidades de ratio (aspect ratio)

Las clases de ratio mantienen proporciones específicas independientemente del contenido, siendo especialmente útiles para elementos multimedia y contenedores que necesitan mantener una forma consistente:

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Video embed"></iframe>
</div>

Proporciones predefinidas disponibles:

• ratio-1x1: Proporción cuadrada (1:1)
• ratio-4x3: Proporción tradicional de TV (4:3)
• ratio-16x9: Proporción widescreen (16:9)
• ratio-21x9: Proporción ultrawide (21:9)

Aplicaciones prácticas de ratios

1 - Galería de imágenes con proporción uniforme:

<div class="row">
  <div class="col-md-6 col-lg-4 mb-3">
    <div class="ratio ratio-1x1">
      <img src="producto1.jpg" class="object-fit-cover" alt="Producto 1">
    </div>
  </div>
  <div class="col-md-6 col-lg-4 mb-3">
    <div class="ratio ratio-1x1">
      <img src="producto2.jpg" class="object-fit-cover" alt="Producto 2">
    </div>
  </div>
  <div class="col-md-6 col-lg-4 mb-3">
    <div class="ratio ratio-1x1">
      <img src="producto3.jpg" class="object-fit-cover" alt="Producto 3">
    </div>
  </div>
</div>

2 - Videos responsivos con proporción consistente:

<div class="container">
  <div class="row">
    <div class="col-lg-8 mx-auto">
      <div class="ratio ratio-16x9">
        <video controls class="object-fit-cover">
          <source src="video-demo.mp4" type="video/mp4">
          Tu navegador no soporta el elemento video.
        </video>
      </div>
    </div>
  </div>
</div>

Proporciones personalizadas

Puedes crear proporciones específicas usando variables CSS personalizadas cuando las opciones predefinidas no se ajusten a tus necesidades:

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div class="bg-secondary text-white d-flex align-items-center justify-content-center">
    <p>Proporción personalizada 2:1</p>
  </div>
</div>

Cálculo de proporciones personalizadas:

• Para 3:2 → --bs-aspect-ratio: 66.666667%
• Para 5:4 → --bs-aspect-ratio: 80%
• Para 2:1 → --bs-aspect-ratio: 50%

Utilidades object-fit

Las clases object-fit controlan cómo el contenido (especialmente imágenes y videos) se ajusta dentro de sus contenedores cuando las dimensiones no coinciden exactamente:

<div class="d-flex gap-3 flex-wrap">
  <div class="ratio ratio-1x1" style="width: 200px;">
    <img src="imagen-rectangular.jpg" class="object-fit-contain border" alt="Contain">
    <small class="position-absolute bottom-0 start-0 bg-dark text-white px-1">contain</small>
  </div>
  
  <div class="ratio ratio-1x1" style="width: 200px;">
    <img src="imagen-rectangular.jpg" class="object-fit-cover border" alt="Cover">
    <small class="position-absolute bottom-0 start-0 bg-dark text-white px-1">cover</small>
  </div>
  
  <div class="ratio ratio-1x1" style="width: 200px;">
    <img src="imagen-rectangular.jpg" class="object-fit-fill border" alt="Fill">
    <small class="position-absolute bottom-0 start-0 bg-dark text-white px-1">fill</small>
  </div>
</div>

Opciones de object-fit:

• object-fit-contain: La imagen se escala manteniendo proporción, puede dejar espacios vacíos
• object-fit-cover: La imagen llena completamente el contenedor, puede recortarse
• object-fit-fill: La imagen se estira para llenar exactamente el contenedor
• object-fit-scale: Equivalente a object-fit-scale-down
• object-fit-none: La imagen mantiene su tamaño natural

Combinando ratios con sizing responsive

Las utilidades de ratio funcionan perfectamente con las dimensiones responsive, creando layouts sofisticados que se adaptan elegantemente:

<div class="row">
  <div class="col-12 col-md-6 mb-4">
    <div class="ratio ratio-4x3">
      <div class="bg-primary text-white d-flex align-items-center justify-content-center">
        <div class="text-center">
          <h4>Contenido 4:3</h4>
          <p class="mb-0">Proporción tradicional</p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-12 col-md-6 mb-4">
    <div class="ratio ratio-16x9">
      <div class="bg-success text-white d-flex align-items-center justify-content-center">
        <div class="text-center">
          <h4>Contenido 16:9</h4>
          <p class="mb-0">Proporción widescreen</p>
        </div>
      </div>
    </div>
  </div>
</div>

Técnicas avanzadas de sizing

1 - Contenedores con altura mínima y proporción:

<div class="min-vh-50 ratio ratio-21x9">
  <div class="bg-dark text-white d-flex align-items-center justify-content-center">
    <h2>Banner ultrawide con altura mínima</h2>
  </div>
</div>

2 - Cards con imágenes proporcionales:

<div class="card" style="width: 18rem;">
  <div class="ratio ratio-16x9">
    <img src="imagen-card.jpg" class="card-img-top object-fit-cover" alt="Imagen de la card">
  </div>
  <div class="card-body">
    <h5 class="card-title">Título de la card</h5>
    <p class="card-text">La imagen mantiene proporción 16:9 independientemente de su tamaño original.</p>
  </div>
</div>

3 - Layout de perfil con avatar proporcional:

<div class="d-flex align-items-center gap-3">
  <div class="ratio ratio-1x1" style="width: 80px; height: 80px;">
    <img src="avatar.jpg" class="object-fit-cover rounded-circle" alt="Avatar">
  </div>
  <div>
    <h5 class="mb-1">Usuario Ejemplo</h5>
    <p class="text-muted mb-0">Avatar siempre circular y proporcional</p>
  </div>
</div>

Casos de uso especializados

Mosaico de contenido multimedia:

<div class="row g-2">
  <div class="col-6">
    <div class="ratio ratio-1x1">
      <img src="imagen1.jpg" class="object-fit-cover rounded" alt="Imagen 1">
    </div>
  </div>
  <div class="col-6">
    <div class="row g-2">
      <div class="col-12">
        <div class="ratio ratio-2x1">
          <img src="imagen2.jpg" class="object-fit-cover rounded" alt="Imagen 2">
        </div>
      </div>
      <div class="col-12">
        <div class="ratio ratio-2x1">
          <img src="imagen3.jpg" class="object-fit-cover rounded" alt="Imagen 3">
        </div>
      </div>
    </div>
  </div>
</div>

Estas utilidades avanzadas de proporción y ajuste proporcionan el control necesario para crear interfaces visuales consistentes y profesionales, especialmente importantes en el diseño moderno donde el contenido multimedia debe adaptarse perfectamente a diferentes tamaños de contenedor manteniendo su calidad visual.