--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/diseno/bootstrap-cuadricula' title: 'Planifica anchos de columna en la cuadrícula de 12 columnas | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:17:39+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Cada fila que añades está en la cuadrícula Bootstrap: doce pistas iguales que sus columnas comparten. Un diseño como 1/3 + 2/3 da a una columna cuatro pistas y a la otra ocho. Usa esta página para planificar anchos que suman, y para dar a una fila un segundo diseño para pantallas más pequeñas. Para añadir una fila, consulta Añadir una fila. El vídeo da a una fila de 4 columnas un segundo diseño para tabletas, y luego estrecha la ventana. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Planifica anchos de columna en la cuadrícula de 12 columnas' description: |- Cada fila que añades está en la cuadrícula Bootstrap: doce pistas iguales que sus columnas comparten. Un diseño como 1/3 + 2/3 da a una columna cuatro pistas y a la otra ocho. Usa esta página para planificar anchos que suman, y para dar a una fila un segundo diseño para pantallas más pequeñas. Para añadir una fila, consulta Añadir una fila. El vídeo da a una fila de 4 columnas un segundo diseño para tabletas, y luego estrecha la ventana. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:17:39+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/diseno/bootstrap-cuadricula' articleSection: 'Guías de diseño' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/diseno/bootstrap-cuadricula' description: |- Cada fila que añades está en la cuadrícula Bootstrap: doce pistas iguales que sus columnas comparten. Un diseño como 1/3 + 2/3 da a una columna cuatro pistas y a la otra ocho. Usa esta página para planificar anchos que suman, y para dar a una fila un segundo diseño para pantallas más pequeñas. Para añadir una fila, consulta Añadir una fila. El vídeo da a una fila de 4 columnas un segundo diseño para tabletas, y luego estrecha la ventana. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Da estilo a tus elementos](/es/hc/documentation/learn-dxpr-builder/element-settings) /[Guías de diseño](/es/hc/documentation/learn-dxpr-builder/design/overview) # Planifica anchos de columna en la cuadrícula de 12 columnas. Aprende DXPR BuilderCrear páginasDa estilo a tus elementosGuías de diseño ## En esta guía Guías relacionadas - [Añade una fila](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas) - [Haz que tu diseño funcione en teléfonos](/es/hc/documentacion/aprender-dxpr-builder/diseno/diseno-adaptable) - [Añade un diseño anidado](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/diseno-anidado) Cada fila que añades está en la cuadrícula Bootstrap: doce pistas iguales que sus columnas comparten. Un diseño como 1/3 + 2/3 da a una columna cuatro pistas y a la otra ocho. Usa esta página para planificar anchos que suman, y para dar a una fila un segundo diseño para pantallas más pequeñas. Para añadir una fila, consulta [Añadir una fila](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas). El vídeo da a una fila de 4 columnas un segundo diseño para tabletas, y luego estrecha la ventana. ## Cómo las fracciones pasan a pistas | Fracción | Pistas | Uso típico | |---|---|---| | 1/1 | 12 | Una columna de ancho completo | | 1/2 | 6 | Dos columnas iguales | | 1/3 | 4 | Tres columnas iguales, o una barra lateral junto a 2/3 | | 2/3 | 8 | Contenido principal junto a una barra lateral de 1/3 | | 1/4 | 3 | Cuatro columnas iguales, o una barra lateral junto a 3/4 | | 3/4 | 9 | Contenido principal junto a una barra lateral de 1/4 | | 1/6 | 2 | Seis columnas pequeñas, como una fila de logos | | 5/12 y 7/12 | 5 y 7 | Dos columnas de ancho casi igual | Las pistas de una fila suman 12. Cuando suman más, las columnas extra saltan a una línea nueva. Usa fracciones que salen en pistas enteras: mitades, tercios, cuartos, sextos y doceavos. Una fracción como 1/5 no tiene clase Bootstrap correspondiente. Una fila dentro de una columna divide esa columna en sus propias doce pistas. Consulta [Anidamiento](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/diseno-anidado). ## Dale a una fila otro diseño en tabletas El diseño que escoges para una fila nueva se aplica desde **Medium devices (≥ 768px)** hacia arriba. Bajo ese ancho, las columnas se apilan. Estos pasos mantienen cuatro columnas en escritorios y muestran dos por línea en tabletas. 1. Pasa sobre la fila y haz clic en el icono de cuadrícula en su barra de controles. El diálogo de diseño se abre en el panel **Medium devices (≥ 768px)**. 2. Escoge la baldosa con cuatro columnas iguales. 3. Haz clic en **Add screen size**. Un segundo panel se abre con una copia del diseño. 4. En la lista de tamaños de pantalla del panel nuevo, elige **Small devices (≥ 576px)**. 5. Haz clic en **Custom Layout**, escribe `1/2 + 1/2 + 1/2 + 1/2` y haz clic en **Save**. 6. Haz clic en **Save** en la barra. Cuatro mitades conservan las cuatro columnas y ponen dos en cada línea. Una baldosa con dos columnas reduciría la fila a dos columnas. ## Lo que ves En una pantalla ancha la fila muestra cuatro columnas lado a lado. Estrecha la ventana del navegador por debajo de 768 píxeles y se agrupan de dos por línea. Bajo 576 píxeles, cada columna ocupa todo el ancho. ## Tamaños de pantalla Cada panel en el diálogo de diseño fija las columnas para un tamaño de pantalla. El diseño también vale para pantallas mayores, hasta el siguiente tamaño con panel propio. | Panel | Se aplica desde | |---|---| | **Extra small (< 576px)** | Los teléfonos más pequeños hacia arriba | | **Small devices (≥ 576px)** | 576 píxeles | | **Medium devices (≥ 768px)** | 768 píxeles; el primer panel de una fila nueva | | **Large devices (≥ 992px)** | 992 píxeles | | **Extra large (≥ 1200px)** | 1200 píxeles | | **Extra extra large (≥ 1400px)** | 1400 píxeles | **Remove screen size** elimina un panel y su diseño. **Custom Layout** acepta cualquier lista de fracciones, como `1/4 + 1/2 + 1/4`. Cuando el diseño de un panel no es una de las baldosas, el diálogo marca **Custom Layout** y nombra el diseño en él, como **Custom Layout (1/2 + 1/2 + 1/2 + 1/2)**. Haz clic para editar ese diseño en el recuadro de diseño personalizado. ## Bootstrap en tu sitio La cuadrícula necesita Bootstrap 5 en la página. Una administración del sitio elige de dónde viene en **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`), en **Bootstrap**. **Sideload Bootstrap files** ofrece **Bootstrap 5**, que el constructor carga por su cuenta, o **None (theme provides Bootstrap)**. ## Si no ves el diseño - **Las columnas se apilan en todos los tamaños de pantalla.** No hay Bootstrap cargado: el ajuste es **None (theme provides Bootstrap)** y el tema no lo carga. Elige **Bootstrap 5** en **Sideload Bootstrap files** desde `/admin/dxpr_studio/dxpr_builder/settings`. - **El diseño de escritorio perdió columnas.** Escogiste una baldosa con menos columnas para otro tamaño de pantalla, y el constructor redujo los diseños de ancho igual para igualar. Deshaz el cambio, como muestra [Deshacer y rehacer](/es/hc/documentacion/aprender-dxpr-builder/edicion/deshacer-rehacer), y usa **Custom Layout** con una fracción por columna. - **La última columna cae a una línea nueva.** Las fracciones suman más de una fila de 12 pistas. Haz que sumen 1, como `1/4 + 3/4`. - **Una columna personalizada no tiene un ancho claro.** Su fracción, como 1/5, no tiene clase Bootstrap. Usa mitades, tercios, cuartos, sextos o doceavos. ## ¿Qué sigue? - [Añadir una fila](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas): añade filas y escoge un preset de columnas. - [Diseño adaptable](/es/hc/documentacion/aprender-dxpr-builder/diseno/diseno-adaptable): muestra u oculta elementos en teléfonos, tabletas o escritorios. - [Anidamiento](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/diseno-anidado): pon filas dentro de columnas para diseños más finos.