Tamaño ancho y alto

Utilidades de tamaño

Bootstrap aporta clases para anchura y altura relativas. El diagrama clasifica las disponibles.

flowchart TB
    Size[Utilidades de tamaño] --> Width["w-25, w-50, w-75, w-100, w-auto"]
    Size --> Height["h-25, h-50, h-75, h-100, h-auto"]
    Size --> MaxW[mw-100]
    Size --> MaxH[mh-100]
    Size --> Viewport["vw-100, vh-100"]
    Size --> MinV[min-vh-100]

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.

Dimensiones adaptativas con el sistema de grid

Las utilidades w-* y h-* de Bootstrap no incluyen variantes responsive (w-md-75 o w-lg-50 no existen en la librería por defecto). Para controlar anchos en distintos tamaños de pantalla se utiliza el sistema de grid con col-{breakpoint}-{n}:

<div class="row">
  <div class="col-12 col-md-9 col-lg-6 bg-primary text-white p-3">
    Móvil: ancho completo. Tablet: 75%. Escritorio: 50%.
  </div>
</div>

Patrón de nomenclatura con columnas:

• col-{n}: ancho en pantallas pequeñas
• col-{breakpoint}-{n}: ancho a partir de ese breakpoint

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

<div class="container-fluid">
  <div class="row mb-2">
    <div class="col-12 col-sm-9 col-md-6 col-lg-3 bg-success text-white p-2">
      Ancho progresivamente menor en pantallas grandes
    </div>
  </div>
  <div class="row">
    <div class="col-3 col-md-6 col-lg-9 col-xl-12 bg-info text-white p-2">
      Ancho progresivamente mayor en pantallas grandes
    </div>
  </div>
</div>

Casos prácticos responsive

1 - Sidebar y contenido principal adaptables:

<div class="row">
  <nav class="col-12 col-md-3 bg-dark text-white p-3">
    <h5>Navegación</h5>
    <p>En móvil ocupa todo el ancho, en tablet y escritorio sólo una cuarta parte.</p>
  </nav>
  <main class="col-12 col-md-9 bg-light p-3">
    <h4>Contenido principal</h4>
    <p>Se adapta automáticamente al espacio restante dentro de la fila.</p>
  </main>
</div>

2 - Galería de imágenes responsive:

<div class="row g-2">
  <div class="col-12 col-sm-6 col-lg-3">
    <img src="oficina-madrid.jpg" class="img-fluid" alt="Fachada oficina central en Madrid">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img src="oficina-barcelona.jpg" class="img-fluid" alt="Sala de reuniones de la oficina de Barcelona">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img src="oficina-valencia.jpg" class="img-fluid" alt="Planta abierta de la oficina de Valencia">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img src="oficina-sevilla.jpg" class="img-fluid" alt="Recepción de la oficina de Sevilla">
  </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="row flex-grow-1 mx-0">
    <div class="col-12 col-lg-9 mx-auto h-50 bg-light p-3 d-flex align-items-center justify-content-center">
      <p>Contenido - 50% de altura y 75% de ancho en escritorio con col-lg-9</p>
    </div>
  </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="ordenador-dell-inspiron.jpg" class="object-fit-cover" alt="Ordenador Dell Inspiron 15">
    </div>
  </div>
  <div class="col-md-6 col-lg-4 mb-3">
    <div class="ratio ratio-1x1">
      <img src="monitor-lg-27.jpg" class="object-fit-cover" alt="Monitor LG UltraGear 27 pulgadas">
    </div>
  </div>
  <div class="col-md-6 col-lg-4 mb-3">
    <div class="ratio ratio-1x1">
      <img src="silla-ergonomica.jpg" class="object-fit-cover" alt="Silla ergonómica Herman Miller Aeron">
    </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-maria-gonzalez.jpg" class="object-fit-cover rounded-circle" alt="Avatar de María González">
  </div>
  <div>
    <h5 class="mb-1">María González</h5>
    <p class="text-muted mb-0">Responsable de Recursos Humanos</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="campana-verano.jpg" class="object-fit-cover rounded" alt="Campaña de verano del catálogo corporativo">
    </div>
  </div>
  <div class="col-6">
    <div class="row g-2">
      <div class="col-12">
        <div class="ratio ratio-2x1">
          <img src="producto-destacado-portatil.jpg" class="object-fit-cover rounded" alt="Producto destacado: portátil Lenovo ThinkPad">
        </div>
      </div>
      <div class="col-12">
        <div class="ratio ratio-2x1">
          <img src="producto-destacado-auriculares.jpg" class="object-fit-cover rounded" alt="Producto destacado: auriculares Jabra Evolve2">
        </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.