Max Width
Sometimes you want to limit the width of a container. You can do this by adding the max-w-* class to the container. We use a 12 column grid system, so the max-width-12 class will set the max width to 12 columns, which is 1440px by default.
| Class | Description | Default Width |
|---|---|---|
max-w-1 | Sets max width to 1 column | 120px |
max-w-2 | Sets max width to 2 columns | 240px |
max-w-3 | Sets max width to 3 columns | 360px |
max-w-4 | Sets max width to 4 columns | 480px |
max-w-5 | Sets max width to 5 columns | 600px |
max-w-6 | Sets max width to 6 columns | 720px |
max-w-7 | Sets max width to 7 columns | 840px |
max-w-8 | Sets max width to 8 columns | 960px |
max-w-9 | Sets max width to 9 columns | 1080px |
max-w-10 | Sets max width to 10 columns | 1200px |
max-w-11 | Sets max width to 11 columns | 1320px |
max-w-12 | Sets max width to 12 columns | 1440px |
Text Module Width
For constraining the width of Beaver Builder text and heading modules specifically, use the text-w-* classes. These are useful for improving readability by limiting line length on wide layouts.
Add the class directly to a Rich Text or Heading module in Beaver Builder.
| Class | Max Width |
|---|---|
text-w-xs | 15rem (240px) |
text-w-sm | 30rem (480px) |
text-w-md | 45rem (720px) |
text-w-lg | 60rem (960px) |
text-w-xl | 75rem (1200px) |
note
These classes only apply to .fl-rich-text and .fl-module-heading.fl-heading elements. For general container width constraints, use the max-w-* classes above.