Alignment and Justification in Bootstrap

Bootstrap’s alignment and justification utilities are essential for positioning and distributing content within flex containers and grid systems. These utilities help ensure that elements are placed and spaced according to design requirements, making layouts more responsive and visually appealing.

1. Flexbox Alignment

Flexbox alignment utilities control the alignment of flex items along the cross axis (perpendicular to the main axis) and within the flex container.

a. Align Items

The align-items property aligns all flex items within a flex container along the cross axis:

• align-items-start: Aligns items to the start of the cross axis.
• align-items-end: Aligns items to the end of the cross axis.
• align-items-center: Centers items along the cross axis.
• align-items-baseline: Aligns items along their baselines.
• align-items-stretch: Stretches items to fill the container (default behavior).

Example:

<div class="d-flex align-items-center" style="height: 200px;">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
</div>

b. Align Self

The align-self property allows you to override the alignment for individual flex items:

• align-self-start: Aligns the item to the start of the cross axis.
• align-self-end: Aligns the item to the end of the cross axis.
• align-self-center: Centers the item along the cross axis.
• align-self-baseline: Aligns the item along its baseline.
• align-self-stretch: Stretches the item to fill the container.

Example:

<div class="d-flex" style="height: 200px;">
  <div class="p-2 align-self-start">Item 1</div>
  <div class="p-2 align-self-end">Item 2</div>
</div>

c. Align Content

The align-content property controls the alignment of flex lines within the flex container:

• align-content-start: Aligns lines to the start of the container.
• align-content-end: Aligns lines to the end of the container.
• align-content-center: Centers lines in the container.
• align-content-between: Distributes lines with space between.
• align-content-around: Distributes lines with space around.
• align-content-evenly: Distributes lines with equal space between and around.

Example:

<div class="d-flex flex-wrap align-content-center" style="height: 200px;">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
  <div class="p-2">Item 3</div>
</div>

2. Flexbox Justification

Flexbox justification utilities manage the alignment and spacing of flex items along the main axis (horizontal by default).

a. Justify Content

The justify-content property controls the alignment of flex items along the main axis:

• justify-content-start: Aligns items to the start of the container.
• justify-content-end: Aligns items to the end of the container.
• justify-content-center: Centers items in the container.
• justify-content-between: Distributes items with space between them.
• justify-content-around: Distributes items with space around them.
• justify-content-evenly: Distributes items with equal space between and around them.

Example:

<div class="d-flex justify-content-between">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
  <div class="p-2">Item 3</div>
</div>

3. Grid Alignment

Bootstrap’s grid system also includes alignment utilities for controlling the alignment of grid columns.

a. Align Items in a Grid

• align-items-start: Aligns columns to the start of the grid row.
• align-items-end: Aligns columns to the end of the grid row.
• align-items-center: Centers columns along the vertical axis of the grid row.
• align-items-baseline: Aligns columns along their baselines.
• align-items-stretch: Stretches columns to fill the grid row.

Example:

<div class="row align-items-center" style="height: 200px;">
  <div class="col-4">Column 1</div>
  <div class="col-4">Column 2</div>
  <div class="col-4">Column 3</div>
</div>

b. Justify Content in a Grid

• justify-content-start: Aligns columns to the start of the grid row.
• justify-content-end: Aligns columns to the end of the grid row.
• justify-content-center: Centers columns in the grid row.
• justify-content-between: Distributes columns with space between them.
• justify-content-around: Distributes columns with space around them.
• justify-content-evenly: Distributes columns with equal space between and around them.

Example:

<div class="row justify-content-between">
  <div class="col-4">Column 1</div>
  <div class="col-4">Column 2</div>
  <div class="col-4">Column 3</div>
</div>

Summary of Alignment and Justification in Bootstrap

• Flexbox Alignment:

  • Align Items: Use classes like align-items-start, align-items-center, align-items-end to align all items in a flex container along the cross axis.
  • Align Self: Use classes like align-self-start, align-self-center, align-self-end to override alignment for individual flex items.
  • Align Content: Use classes like align-content-start, align-content-center, align-content-between to align flex lines within the container.

• Flexbox Justification:

  • Justify Content: Use classes like justify-content-start, justify-content-center, justify-content-between to align and distribute items along the main axis.

• Grid Alignment:

  • Align Items in a Grid: Use classes like align-items-center, align-items-start, align-items-end to align columns within a grid row.
  • Justify Content in a Grid: Use classes like justify-content-center, justify-content-between, justify-content-around to distribute columns in a grid row.