Alignment Classes

Alignment Classes

Here’s a complete list of CSS variables for alignment classes, formatted for easy pasting into Bricks Builder’s CSS Variables section. These variables cover self-alignment within a container, basic alignment, and specific alignments for top, middle, and bottom positions.

/* Self Alignment in Container */
--c-center-self: center;
--c-left-self: flex-start;
--c-right-self: flex-end;

/* Basic Alignment */
--c-center: center;
--c-left: flex-start;
--c-right: flex-end;

/* Top Alignment */
--c-top-center: center;
--c-top-left: flex-start;
--c-top-right: flex-end;

/* Middle Alignment */
--c-middle-center: center;
--c-middle-left: flex-start;
--c-middle-right: flex-end;

/* Bottom Alignment */
--c-bottom-center: center;
--c-bottom-left: flex-start;
--c-bottom-right: flex-end;
How to Use in Bricks Builder
  • Paste the Variables: Copy all the lines and paste them into the CSS Variables field in Bricks Builder under Bricks > Settings > Variables.
  • Using the Variables in CSS:
    • Self Alignment: Use align-self to control the alignment of individual items within a flex or grid container.
align-self: var(--c-center-self); /* Aligns the item to the center */

Basic and Specific Alignments: Use justify-content and align-items in a flex container to control alignment of all items.

justify-content: var(--c-left); /* Aligns all items to the left */
align-items: var(--c-middle-center); /* Aligns items to the middle center */

This setup provides a comprehensive alignment system, allowing you to apply precise alignment to individual elements or groups of elements in Bricks Builder. Adjust values as needed to match specific layout requirements.

Example Code for Alignment Variables Page

This setup helps you see different alignment options by centering, aligning left, and aligning right each box.

<div style="display: flex; flex-direction: column; gap: 1rem;">
  <div class="align-box" style="justify-content: var(--c-left);">Left Aligned</div>
  <div class="align-box" style="justify-content: var(--c-center);">Center Aligned</div>
  <div class="align-box" style="justify-content: var(--c-right);">Right Aligned</div>
</div>

<style>
  .align-box {
    display: flex;
    width: 100%;
    height: 50px;
    background-color: #e8e8e8;
    border: 1px solid #ccc;
    padding: 1rem;
  }
</style>
Left Aligned
Center Aligned
Right Aligned

This code demonstrates alignment by using justify-content to show left, center, and right alignments.