--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/bootstrap-grid' title: 'Plan column widths on the 12-column grid | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'How column fractions map to the 12-column grid, and how to give a row another layout on tablets or phones' 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-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Plan column widths on the 12-column grid' description: 'How column fractions map to the 12-column grid, and how to give a row another layout on tablets or phones' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+0000' dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/design/bootstrap-grid' articleSection: 'Design guides' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/bootstrap-grid' description: 'How column fractions map to the 12-column grid, and how to give a row another layout on tablets or phones' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Style your elements](/hc/documentation/learn-dxpr-builder/element-settings) /[Design guides](/hc/documentation/learn-dxpr-builder/design/overview) # Plan column widths on the 12-column grid. How column fractions map to the 12-column grid, and how to give a row another layout on tablets or phones Learn DXPR BuilderBuild pagesStyle your elementsDesign guides ## In this guide Related guides - [Rows and Columns](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [Responsive design](/hc/documentation/learn-dxpr-builder/design/responsive-design) - [Nesting](/hc/documentation/learn-dxpr-builder/layout/nesting) Every row you add sits on the Bootstrap grid: twelve equal tracks that its columns share. A layout such as 1/3 + 2/3 gives one column four tracks and the other eight. Use this page to plan widths that add up, and to give a row a second layout for smaller screens. To add a row in the first place, see [Adding a Row](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns). The video gives a row of 4 columns a second layout for tablets, then narrows the window. ## How fractions become tracks | Fraction | Tracks | Typical use | |---|---|---| | 1/1 | 12 | One full-width column | | 1/2 | 6 | Two equal columns | | 1/3 | 4 | Three equal columns, or a sidebar next to 2/3 | | 2/3 | 8 | Main content next to a 1/3 sidebar | | 1/4 | 3 | Four equal columns, or a sidebar next to 3/4 | | 3/4 | 9 | Main content next to a 1/4 sidebar | | 1/6 | 2 | Six small columns, such as a row of logos | | 5/12 and 7/12 | 5 and 7 | Two columns of almost equal width | The tracks of a row add up to 12. When they add up to more, the extra columns wrap to a new line. Use fractions that come out as whole tracks: halves, thirds, quarters, sixths and twelfths. A fraction such as 1/5 has no matching Bootstrap class. A row inside a column splits that column into its own twelve tracks. See [Nesting](/hc/documentation/learn-dxpr-builder/layout/nesting). ## Give a row another layout on tablets The layout you pick for a new row applies from **Medium devices (≥ 768px)** up. Below that width, columns stack. These steps keep four columns on desktops and show two per line on tablets. 1. Hover the row and click the grid icon in its control bar. The layout dialog opens on the **Medium devices (≥ 768px)** panel. 2. Pick the tile with four equal columns. 3. Click **Add screen size**. A second panel opens with a copy of the layout. 4. In the new panel's screen size list, choose **Small devices (≥ 576px)**. 5. Click **Custom Layout**, type `1/2 + 1/2 + 1/2 + 1/2` and click **Save**. 6. Click **Save** on the toolbar. Four halves keep all four columns and put two on each line. A tile with two columns would instead reduce the row to two columns. ## What you see On a wide screen the row shows four columns side by side. Make the browser window narrower than 768 pixels and they wrap to two per line. Below 576 pixels, every column takes the full width. ## Screen sizes Each panel in the layout dialog sets the columns for one screen size. The layout also holds for larger screens, up to the next size with a panel of its own. | Panel | Applies from | |---|---| | **Extra small (< 576px)** | The smallest phones up | | **Small devices (≥ 576px)** | 576 pixels | | **Medium devices (≥ 768px)** | 768 pixels; the first panel of a new row | | **Large devices (≥ 992px)** | 992 pixels | | **Extra large (≥ 1200px)** | 1200 pixels | | **Extra extra large (≥ 1400px)** | 1400 pixels | **Remove screen size** deletes a panel and its layout. **Custom Layout** takes any list of fractions, such as `1/4 + 1/2 + 1/4`. When a panel's layout is not one of the tiles, the dialog marks **Custom Layout** and names the layout on it, such as **Custom Layout (1/2 + 1/2 + 1/2 + 1/2)**. Click it to edit that layout in the custom layout box. ## Bootstrap on your site The grid needs Bootstrap 5 on the page. A site administrator chooses where it comes from in **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`), under **Bootstrap**. **Sideload Bootstrap files** offers **Bootstrap 5**, which the builder loads itself, or **None (theme provides Bootstrap)**. ## If you don't see the layout - **Columns stack on every screen size.** No Bootstrap is loaded: the setting is **None (theme provides Bootstrap)** and the theme does not load it. Choose **Bootstrap 5** under **Sideload Bootstrap files** at `/admin/dxpr_studio/dxpr_builder/settings`. - **The desktop layout lost columns.** You picked a tile with fewer columns for another screen size, and the builder reduced the equal-width layouts to match. Undo the change, as [Undo and redo](/hc/documentation/learn-dxpr-builder/editing/undo-redo) shows, and use **Custom Layout** with one fraction per column. - **The last column drops to a new line.** The fractions add up to more than one row of 12 tracks. Make them add up to 1, such as `1/4 + 3/4`. - **A custom column has no clear width.** Its fraction, such as 1/5, has no Bootstrap class. Use halves, thirds, quarters, sixths or twelfths. ## What's next? - [Adding a Row](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): add rows and pick a column preset. - [Responsive design](/hc/documentation/learn-dxpr-builder/design/responsive-design): show or hide elements on phones, tablets or desktops. - [Nesting](/hc/documentation/learn-dxpr-builder/layout/nesting): place rows inside columns for finer layouts.