Diseño de layouts

Diseño de layout en Bootstrap

Uso de Puntos de interrupción en Bootstrap

Los puntos de interrupción son anchos personalizables que determinan cómo se comporta tu diseño responsive en todos los tamaños de dispositivos o viewports en Bootstrap.

Conceptos básicos

Los puntos de interrupción son los componentes básicos del diseño responsive. Utilízalos para controlar cuándo se puede adaptar tu diseño a un viewport o tamaño de dispositivo en particular.
Utiliza media queries para diseñar su CSS por punto de interrupción. Las media queries son una característica de CSS que te permite aplicar estilos condicionalmente según un conjunto de parámetros del navegador y del sistema operativo. Normalmente utilizamos min-width en nuestras media queries.
El objetivo es el diseño responsive mobile-first. El CSS de Bootstrap tiene como objetivo aplicar el mínimo indispensable de estilos para hacer que un diseño funcione en el punto de interrupción más pequeño, y luego aplicar capas de estilos para ajustar ese diseño a tamaños de dispositivos más grandes. Esto optimiza tu CSS, mejora el tiempo de renderizado y brinda una excelente experiencia a tus visitantes.

Puntos de interrupción disponibles

Bootstrap incluye seis puntos de interrupción predeterminados, a veces denominados niveles de cuadrícula, para crear de manera responsive. Estos puntos de interrupción se pueden personalizar si utilizas nuestros archivos fuente Sass.

Punto de interrupción	Clase infix	Dimensiones
Extra pequeño	Ninguno	<576px
Pequeño	`sm`	≥576px
Medio	`md`	≥768px
Grande	`lg`	≥992px
Extra grande	`xl`	≥1200px
Extra extra grande	`xxl`	≥1400px

Cada punto de interrupción se eligió para contener cómodamente contenedores cuyos anchos son múltiplos de 12. Los puntos de interrupción también son representativos de un subconjunto de tamaños de dispositivos y dimensiones de viewports comunes; no se dirigen específicamente a cada caso de uso o dispositivo. En cambio, las gamas proporcionan una base sólida y consistente sobre la que construir para casi cualquier dispositivo.

Estos puntos de interrupción se pueden personalizar a través de Sass; los encontrarás en un mapa de Sass en nuestra hoja de estilo _variables.scss .

scss/_variables.scss

scss/_variables.scss
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Para obtener más información y ejemplos sobre cómo modificar nuestros mapas y variables de Sass, consulta la sección CSS de la documentación de Grid.

Media queries

Dado que Bootstrap está desarrollado para ser mobile-first, usamos un puñado de media queries para crear puntos de interrupción sensibles para nuestros diseños e interfaces. Estos puntos de interrupción se basan principalmente en anchos mínimos del viewport y nos permiten ampliar los elementos a medida que cambia el viewport.

Min-width

Bootstrap utiliza principalmente los siguientes rangos de media query (o puntos de interrupción) en nuestros archivos Sass fuente para nuestro diseño, sistema de cuadrícula y componentes.

SCSS
// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Estos mixins de Sass se traducen en nuestro CSS compilado usando los valores declarados en nuestras variables de Sass. Por ejemplo:

SCSS
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Max-width

Ocasionalmente usamos media queries que van en la otra dirección (el tamaño de pantalla dado o menor):

SCSS
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Estos mixins toman esos puntos de interrupción declarados, les restan .02px y los usan como nuestros valores de max-width. Por ejemplo:

SCSS
// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

⚠️

¿Por qué restar .02px? Los navegadores actualmente no admiten consultas de contexto de rango, por lo que solucionamos las limitaciones de min- y max- (prefijos) y viewports con anchos fraccionarios (que pueden ocurrir bajo ciertas condiciones en dispositivos de alta resolución, por ejemplo) usando valores con mayor precisión.

Punto de interrupción único

También existen media queries y mixins para apuntar a un solo segmento de tamaños de pantalla utilizando los anchos de punto de interrupción mínimo y máximo.

SCSS
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

Por ejemplo, @include media-breakpoint-only(md) { ... } dará como resultado:

SCSS
@media (min-width: 768px) and (max-width: 991.98px) { ... }

Entre puntos de interrupción

De manera similar, las media queries pueden abarcar múltiples anchos de puntos de interrupción:

SCSS
@include media-breakpoint-between(md, xl) { ... }

Lo cual resulta en:

SCSS
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Uso de Contenedores en Bootstrap

Los contenedores son un componente fundamental de Bootstrap que contiene, rellena y alinea tu contenido dentro de un dispositivo o viewport determinado.

Cómo funcionan

Los contenedores son el elemento de diseño más básico en Bootstrap y son requeridos cuando usamos nuestro sistema de cuadrícula predeterminado. Los contenedores se utilizan para contener, rellenar y (a veces) centrar el contenido dentro de ellos. Si bien los contenedores pueden anidarse, la mayoría de los diseños no requieren un contenedor anidado.

Bootstrap viene con tres contenedores diferentes:

.container, que establece un max-width en cada punto de interrupción responsive
.container-{breakpoint}, que es width: 100% hasta el punto de interrupción especificado
.container-fluid, que es width: 100% en todos los puntos de interrupción

La siguiente tabla ilustra cómo se compara el max-width de cada contenedor con el .container y el .container-fluid original en cada punto de interrupción.

Velos en acción y compáralos en nuestro ejemplo de cuadrícula.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

Contenedor predeterminado

Nuestra clase .container predeterminada es un contenedor responsive de ancho fijo, lo que significa que su max-width cambia en cada punto de interrupción.

HTML
<div class="container">
  <!-- Content here -->
</div>

Contenedores responsive

Los contenedores responsive te permiten especificar una clase que tiene un ancho del 100% hasta que se alcanza el punto de interrupción especificado, después de lo cual aplicamos max-width para cada uno de los puntos de interrupción más altos. Por ejemplo, .container-sm tiene un ancho 100% para comenzar hasta que se alcance el punto de interrupción sm, donde se ampliará con md, lg, xl y xxl.

HTML
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Contenedores fluid

Usa .container-fluid para un contenedor de ancho completo, que abarque todo el ancho del viewport.

HTML
<div class="container-fluid">
  ...
</div>

Personalización del CSS

Variables Sass generales relacionadas

Como se muestra arriba, Bootstrap genera una serie de clases contenedoras predefinidas para ayudarte a crear los diseños que deseas. Puedes personalizar estas clases de contenedores predefinidas modificando el mapa Sass (que se encuentra en _variables.scss) que las impulsa:

scss/_variables.scss

scss/_variables.scss
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Para obtener más información y ejemplos sobre cómo modificar nuestros mapas y variables de Sass, consulta la sección de Sass de la documentación de Grid (cuadrícula).

Sass mixins

Además de personalizar el Sass, también puedes crear tus propios contenedores con nuestro mixin Sass.

SCSS
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Uso de Gutters en Bootstrap

Los gutteres son el relleno entre tus columnas, que se utilizan para espaciar y alinear de manera responsive el contenido en el sistema de cuadrícula de Bootstrap.

Cómo funcionan

Los gutters son los espacios entre el contenido de las columnas, creados por el padding horizontal. Configuramos padding-right y padding-left en cada columna y usamos un margin negativo para compensarlo al principio y al final de cada fila para alinear el contenido.
Los gutters comienzan en 1.5rem (24px) de ancho. Esto nos permite hacer coincidir nuestra cuadrícula con la escala de espaciadores de margin y padding.
Los gutters se pueden ajustar de forma responsive. Utiliza clases de gutters específicas de puntos de interrupción para modificar gutters horizontales, verticales y todos los gutters.

Gutters horizontales

.gx-* (clases) se pueden usar para controlar el ancho del gutter horizontal. Es posible que sea necesario ajustar el padre .container o .container-fluid si también se utilizan gutters más grandes para evitar desbordamientos no deseados, utilizando una utilidad de relleno coincidente. Por ejemplo, en el siguiente ejemplo hemos aumentado el relleno con .px-4:

HTML
    <div class="container px-4 text-center">
        <div class="row gx-5">
            <div class="col">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
            <div class="col">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
        </div>
    </div>

Una solución alternativa es agregar un contenedor alrededor del .row con la clase .overflow-hidden:

HTML
    <div class="container overflow-hidden text-center">
        <div class="row gx-5">
            <div class="col">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
            <div class="col">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
        </div>
    </div>

Gutters verticales

.gy-* (clases) se pueden usar para controlar el ancho del canal vertical dentro de una fila cuando las columnas se ajustan a nuevas líneas. Al igual que los márgenes horizontales, los márgenes verticales pueden provocar cierto desbordamiento debajo del .row al final de una página. Si esto ocurre, agrega un contenedor alrededor de .row con la clase .overflow-hidden:

HTML
    <div class="container overflow-hidden text-center">
        <div class="row gy-5">
            <div class="col-6">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
            <div class="col-6">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
            <div class="col-6">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
            <div class="col-6">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
        </div>
    </div>

Gutters horizontales y verticales

Usa las clases .g-* para controlar los gutters horizontales y verticales de la cuadrícula. En el siguiente ejemplo, utilizamos un ancho de gutter más pequeño, por lo que no es necesaria la clase contenedora .overflow-hidden.

HTML
    <div class="container text-center">
        <div class="row g-2">
            <div class="col-6">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
            <div class="col-6">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
            <div class="col-6">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
            <div class="col-6">
                <div class="p-3">Relleno de columna personalizado</div>
            </div>
        </div>
    </div>

Gutters filas columnas

Las clases de canal también se pueden agregar a columnas de fila. En el siguiente ejemplo, utilizamos columnas de fila y clases de gutter responsive.

HTML
    <div class="container text-center">
        <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
            <div class="col">
                <div class="p-3">Columna fila</div>
            </div>
            <div class="col">
                <div class="p-3">Columna fila</div>
            </div>
            <div class="col">
                <div class="p-3">Columna fila</div>
            </div>
            <div class="col">
                <div class="p-3">Columna fila</div>
            </div>
            <div class="col">
                <div class="p-3">Columna fila</div>
            </div>
            <div class="col">
                <div class="p-3">Columna fila</div>
            </div>
            <div class="col">
                <div class="p-3">Columna fila</div>
            </div>
            <div class="col">
                <div class="p-3">Columna fila</div>
            </div>
            <div class="col">
                <div class="p-3">Columna fila</div>
            </div>
            <div class="col">
                <div class="p-3">Columna fila</div>
            </div>
        </div>
    </div>

Sin gutters

Los márgenes entre columnas en nuestras clases de cuadrícula predefinidas se pueden eliminar con .g-0. Esto elimina los margin negativos de .row y el padding horizontal de todas las columnas secundarias inmediatas.

¿Necesitas un diseño de borde a borde? Suelta el .container o .container-fluid principal y agrega .mx-0 al .row para evitar el desbordamiento.

En la práctica, así es como se ve. Ten en cuenta que puedes continuar usando esto con todas las demás clases de cuadrícula predefinidas (incluidos anchos de columna, niveles responsive, reordenamientos y más).

HTML
    <div class="row g-0 text-center">
        <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>

Cambia los gutters

Las clases se construyen a partir del mapa Sass $gutters que se hereda del mapa Sass $spacers.

SCSS
$grid-gutter-width: 1.5rem;
$gutters: (
    0: 0,
    1: $spacer * .25,
    2: $spacer * .5,
    3: $spacer,
    4: $spacer * 1.5,
    5: $spacer * 3,
);

Utilidades para diseño de layout en Bootstrap

Para un desarrollo responsive y compatible con dispositivos móviles más rápido, Bootstrap incluye docenas de clases de utilidad para mostrar, ocultar, alinear y espaciar contenido.

Cambiando `display`

Utiliza nuestras utilidades de visualización para alternar de forma responsive los valores comunes de la propiedad display. Mézclalo con nuestro sistema de cuadrícula, contenido o componentes para mostrarlos u ocultarlos en viewports específicos.

Opciones de Flexbox

Bootstrap está construido con flexbox, pero no se ha cambiado el display de cada elemento a display: flex ya que esto agregaría muchos elementos innecesarios y sobrescribiría inesperadamente comportamientos clave del navegador. La mayoría de nuestros componentes están construidos con flexbox habilitado.

Si necesitas agregar display: flex a un elemento, hazlo con .d-flex o uno de las variantes responsive (por ejemplo .d-sm-flex). Necesitarás esta clase o valor display para permitir el uso de nuestras utilidades flexbox adicionales para dimensionar, alinear, espaciar y más.

Margen y relleno

Usa las utilidades margin y padding de espaciado para controlar cómo se espacian y dimensionan los elementos y componentes. Bootstrap incluye una escala de seis niveles para utilidades de espaciado, basada en un valor predeterminado de 1rem para la variable $spacer. Elige valores para todas los viewports (p. ej., .me-3 para margin-right: 1rem en LTR) o elige variantes responsive para apuntar a viewports específicas (p. ej., .me-md-3 para margin-right: 1rem —en LTR— comenzando en el punto de interrupción md).

Alterna `visibility`

Cuando no es necesario alternar display, puedes alternar visibility de un elemento con nuestras utilidades de visibilidad. Los elementos invisibles seguirán afectando el diseño de la página, pero están visualmente ocultos para los visitantes.

El rol de los valores z-index en Bootstrap

Si bien no forman parte del sistema de cuadrícula de Bootstrap, los índices z juegan un papel importante en cómo nuestros componentes se superponen e interactúan entre sí.

Varios componentes de Bootstrap utilizan z-index, la propiedad CSS que ayuda a controlar el diseño al proporcionar un tercer eje para organizar el contenido. Utilizamos una escala de índice z predeterminada en Bootstrap que ha sido diseñada para superponer correctamente la navegación, tooltips y ventanas emergentes, modales y más.

Estos valores más altos comienzan en un número arbitrario, lo suficientemente alto y específico como para evitar conflictos idealmente. Necesitamos un conjunto estándar de estos en todos nuestros componentes en capas (tooltips, ventanas emergentes, barras de navegación, menús desplegables, modales) para que podamos ser razonablemente consistentes en los comportamientos. No hay ninguna razón por la que no pudiéramos haber usado 100+ o 500+.

No fomentamos la personalización de estos valores individuales; si cambias uno, es probable que debas cambiarlos todos.

scss/_variables.scss

scss/_variables.scss
$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-offcanvas-backdrop:         1040;
$zindex-offcanvas:                  1045;
$zindex-modal-backdrop:             1050;
$zindex-modal:                      1055;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;
$zindex-toast:                      1090;

Para manejar los bordes superpuestos dentro de los componentes (por ejemplo, botones y entradas en grupos de entrada), utilizamos valores bajos de z-index de un solo dígito de 1, 2 y 3 para los estados predeterminado, hover y active. Al producirse hover/focus/active, colocamos un elemento en particular en primer plano con un valor de z-index más alto para mostrar su borde sobre los elementos hermanos.

Última actualización marzo 30, 2024

Personalizar Bootstrap Sistema de grilla

Diseño de layout en Bootstrap

Uso de Puntos de interrupción en Bootstrap

Conceptos básicos

Puntos de interrupción disponibles

Media queries

Min-width

Max-width

Punto de interrupción único

Entre puntos de interrupción

Uso de Contenedores en Bootstrap

Cómo funcionan

Contenedor predeterminado

Contenedores responsive

Contenedores fluid

Personalización del CSS

Variables Sass generales relacionadas

Sass mixins

Uso de Gutters en Bootstrap

Cómo funcionan

Gutters horizontales

Gutters verticales

Gutters horizontales y verticales

Gutters filas columnas

Sin gutters

Cambia los gutters

Utilidades para diseño de layout en Bootstrap

Cambiando display

Opciones de Flexbox

Margen y relleno

Alterna visibility

El rol de los valores z-index en Bootstrap

Cambiando `display`

Alterna `visibility`