Skip to main content

Components Alignment Vertical and Horizontal

Intro​

To align components within a parent div or box horizontally or vertically, use CSS properties like "justify-content" for horizontal alignment and "align-items" for vertical alignment. These properties, set on the parent container, control the positioning of child elements.

In this video you will understand how to align any component horizontally or vertically within the underlying parent div or box (column). You can either use the Bootstrap 5 CSS classes or can do it through Style Manager Flex option.

1. Align Text​

You can drop any component by dragging and dropping it from the Components section. Let's say you choose the Link component. This is by default always aligned to the left. To centre-align it go to its parent layer the arrow on top and choose Text align. Here you can align it as you please and Save** the changes. Similarly, you can add components and align them as need be.

DrapCode Builder Font Family

2. Add a Margin​

To add a margin simply add the numbers in the Margin box and it will appear on the page and Save the changes. Now set the Text align as centre to make sure it is centrally aligned.

DrapCode Builder Font Family

3. Align with CSS​

Apply Bootstrap classes. You can copy these classes from Bootstrap page and paste them and Save the changes,

DrapCode Builder Font Family

4. Align with Style Manager​

For this choose the Flex and Enable it, the select Justify and Align options to align the component as you need to and Save the changes.

DrapCode Builder Font Family

Conclusion​

One benefit of using CSS properties like "justify-content" and "align-items" is that they provide a flexible way to align components within a parent container both horizontally and vertically, allowing for precise control over the layout of elements on a webpage.