Prev Next

Grid Alignment: Using align-items-* and justify-content-* to Align Rows and Columns

Bootstrap 5 provides utility classes to align rows and columns horizontally and vertically within the grid system. The align-items-* classes control vertical alignment, while the justify-content-* classes handle horizontal alignment.

Key Topics

Vertical Alignment with align-items-*

Use the align-items-* classes to align grid items vertically. Available options include start, center, end, baseline, and stretch (default).

<div class="container">
    <div class="row align-items-center" style="height: 200px;">
        <div class="col">Center Aligned</div>
        <div class="col">Center Aligned</div>
    </div>
</div>

Explanation: The align-items-center class centers items vertically within the row.

Horizontal Alignment with justify-content-*

Use the justify-content-* classes to align grid items horizontally. Available options include start, center, end, around, evenly, and between.

<div class="container">
    <div class="row justify-content-center">
        <div class="col-4">Center Justified</div>
    </div>
</div>

Explanation: The justify-content-center class centers items horizontally within the row.

Combining Vertical and Horizontal Alignment

Combine align-items-* and justify-content-* classes to align items both vertically and horizontally.

<div class="container">
    <div class="row align-items-center justify-content-around" style="height: 200px;">
        <div class="col-4">Centered Around</div>
        <div class="col-4">Centered Around</div>
    </div>
</div>

Explanation: This example aligns items vertically at the center and distributes them evenly around the row horizontally.

Complete Grid Alignment Example

The following is a complete example showcasing various alignments using the align-items-* and justify-content-* classes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid Alignment Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Grid Alignment</h2>
        <div class="row align-items-start mb-3" style="height: 200px;">
            <div class="col">Start Aligned</div>
            <div class="col">Start Aligned</div>
        </div>
        <div class="row align-items-center justify-content-between" style="height: 200px;">
            <div class="col">Centered and Between</div>
            <div class="col">Centered and Between</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example showcases multiple alignments, including vertical and horizontal distribution, for a flexible grid layout.

Key Takeaways

  • Use align-items-* for vertical alignment.
  • Use justify-content-* for horizontal alignment.
  • Combine alignment classes for flexible layouts.
  • Ensure proper height for rows to see alignment effects clearly.
Prev Next