Resize Or Reset Column Width | Beaver Builder Knowledge Base

Skip to main content🎉 New Beaver Builder template marketplace! Get started for FREE at Assistant.Pro.Beaver Builder 2.10

• Beaver Builder 2.10
• Beaver Builder 2.9

Beaver ThemerBB ThemeAssistantCoursesSearch

• Introduction
• Account
• Getting Started
• User Interface (UI)
• Settings & Tools
• Builder Basics
• Layouts
  • Templates
  • Rows
  • Columns
    • Column layouts overview
    • Tips for working with columns
    • Insert columns
    • Edit a column
    • Resize or reset column width
    • Move a column
    • Duplicate a column
    • Stacking
  • Modules
  • The Advanced Tab
  • Responsive Design
  • Post Layouts
  • Reusable Content
• Shortcode
• Integrations
• Advanced
• Troubleshooting
• Developer

This is unreleased documentation for Beaver Builder Knowledge Base Beaver Builder 2.10 version.For up-to-date documentation, see the latest version (Beaver Builder 2.9).

• Layouts
• Columns
• Resize or reset column width

Version: Beaver Builder 2.10On this page

You can resize column width using one of several methods. You can reset column width to the defaults. Finally, you can vary column width according to device, which also prevents column stacking.

Resize column width​

The method to resize column width largely depends on how many columns are in the column group.

Resize column width in a single-column group​

When a column group contains just one column, by default the width is 100%. There are two methods you can use to reduce the width of a single column.

• Set the column width to less than 100%. Open the column settings and change the Width setting on the Style tab. Note: The column stays left-aligned and the width of the column is shortened, as shown in this screenshot. You can't change the horizontal alignment with this method.

• Place an empty column on each side of the single column, then set column widths to position the center column horizontally. Use the column drag handles to set the column widths you want.

Resize column width in multicolumn groups​

There are two methods to resize column width. With both methods, resizing one column width resizes the other column widths in the same column group to maintain a total of 100%. The new setting applies to all device sizes unless you change the width separately for medium and small devices.

For example, by default two columns in a column group are sized at 50% width each. If you resize one column width to 60%, the other column automatically resizes to 40%.

Method 1: Drag the column handle​

This method is quick and easy.

• In your layout, mouse over a module and drag a column handle, shown here:

Tip

If have two modules in a single column, you can drag the handles on either module.

Method 2: Use Column Settings​

This method may not work well for changing the widths of more than two columns because every time you change one width, the others resize automatically to total 100%.

1. Open a column for editing.
2. On the Style tab, change the percentage in Column width.

Reset column widths​

With this procedure you can reset column widths to evenly divided widths for the entire column group.

To reset the column widths for the entire column group:

• Mouse over a module to display its toolbar, then click Edit Column > Reset column widths.If the options display a hamburger icon, click that, then mouse over Edit column to reveal the settings.

info

If you have custom widths set for medium and small devices on the Advanced tab, you must change those manually.

PreviousEdit a columnNextMove a column

• Resize column width
• Resize column width in a single-column group
• Resize column width in multicolumn groups
  • Method 1: Drag the column handle
  • Method 2: Use Column Settings
• Reset column widths