Beaver Builder

Last UpdatedJuly 12, 2019

Table of Contents

Summary

This reference guide is intended for Department or Center websites that use Page Builder. For guides explaining the basics of using Page Builder please view the Documentation Guides section instead.

CSS Classes

Adding CSS Classes

While using Page Builder, CSS Classes can be added to modules, columns, and rows to modify their behavior, layout, and style.

Below is a list of CSS Classes that are available, along with their descriptions, and an example of the expected output.

Colors

To see a full list of color classes look at the Visual Brand Language doc.

Effects

shadow
Adds a shadow to the outer perimeter of the current module

shadow-inset
Adds an inward facing shadow to the outer perimeter of the current module

shadow-inset-top-bottom
Adds an inward facing shadow to the outer perimeter along the top and bottom of the current module

Layout

fl-col-gutter-double
Increases the gutter width between columns to be double the default. This class can be used on a row to affect all columns in the row or on a column to affect only that one column.

no-margin
Removes any extra margin around a row, column, or module.

Site Specific

Music, Theatre, and Dance

cla-events-list
Must be used with the Events module and will change the display style from the default grid to a list style.

cla-events-no-featured-image
Must be used with the Events module and will hide the event featured image from displaying.

entry-header-has-bg
Intended to be added to a row (generally the first row in the page, which includes the page title), and sets up the proper styling for the row height, text color, text shadow, and background gradient overlay.

Comments

Felix says:

August 18, 2026 at 12:19 am

The visual style of a profile often begins with its name, where even one well-chosen character can create distinction. username symbols are most effective when they are easy to recognize, do not interrupt searchability, and match the tone of the account. Grouping choices into ready-made combinations helps people avoid mismatched characters or excessive ornament. It also makes a small design decision feel manageable for anyone updating a handle, creator bio, community nickname, or social display name.

Adam says:

August 18, 2026 at 7:26 am

A symbol reference is most helpful when it answers more than “what does this character look like?” For example, Approximately Symbol can support the full handoff from written math to web content by identifying the character and its common code representations. It is also worth confirming whether a statement needs approximation, equality, or another relation symbol before copying anything. That brief notation check improves accessibility, prevents misleading formulas, and keeps examples consistent across documents and interfaces.

Gera says:

September 3, 2026 at 12:44 am

In the world of online gaming, there are thousands of games designed to entertain players and provide a short escape from everyday life. Some games are complicated and require players to learn many rules, while others are simple enough to understand within a few seconds. Snow Rider 3D belongs to the second category. It is a fun and fast-paced winter-themed game Snow Rider 3D that combines simple controls, exciting challenges, colorful graphics, and an endless desire to improve one’s score. The game places the player on a snowy mountain and challenges them to control a sled while avoiding obstacles, collecting gifts, and traveling as far as possible.

Information Technology

IT Services

Web Services

Remote Resources

Guides

Support