Bootstrap Row Horizontal Alignment

Bootstrap Row Controls have a Horizontal Alignment property which defines how Bootstrap Column Controls are aligned along the flex main axis.

The alignment can be set to:

Start Columns are packed closest to the start of the Bootstrap Row Control (default)
End Columns are packed closest to the end of the Bootstrap Row Control
Center Columns are packed closest to the centre of the Bootstrap Row Control.
Around Columns are evenly distributed with equal space around each column.
Between Columns are evenly distributed with the first column at the start of the container and the last column at the end of the container.

For responsive horizontal alignment, use the Bootstrap class: justify-content-{bp}-{start|end|center|around|between} e.g. justify-content-md-between.

Steps

Create a new Form with a Bootstrap4 Presentation Template and add a Bootstrap Container to the form.

Add a Bootstrap Row Control to the Bootstrap Container Control. Give it the classes bg-primary and justify-content-md-end. Set the Horizontal Alignment of the Bootstrap Row Control to Between.

Add three Bootstrap Column Controls to the row and give them each class bg-secondary.

Run the form and observe the alignment of the row and columns at different screen sizes by reducing the size of the browser window.

Previous Page Next Page

Current Module

Responsive Layouts

Bootstrap Row Horizontal Alignment

Steps

Current Module

Related