Prev Next

Auto Layout Columns: Creating Grids Without Defining Column Sizes Explicitly

Bootstrap 5 allows you to create grid layouts where column sizes are automatically determined based on the content. Use the .col class to create columns that dynamically adjust their width without specifying grid units.

Key Topics

Basic Auto Layout with .col

Use the .col class to create columns that distribute space equally across the row.

<div class="container">
    <div class="row">
        <div class="col">Column 1</div>
        <div class="col">Column 2</div>
        <div class="col">Column 3</div>
    </div>
</div>

Explanation: All three columns share equal width because of the .col class.

Mixing Auto Layout and Fixed Columns

Combine .col with fixed-width column classes like .col-* to create mixed layouts.

<div class="container">
    <div class="row">
        <div class="col-4">Fixed Column (4 units)</div>
        <div class="col">Auto Layout Column</div>
    </div>
</div>

Explanation: The first column occupies 4 grid units, while the second column automatically adjusts its size to fill the remaining space.

Responsive Auto Layout

Use breakpoint-specific classes like .col-md for responsive auto-layout columns.

<div class="container">
    <div class="row">
        <div class="col-md">Auto Column 1</div>
        <div class="col-md">Auto Column 2</div>
        <div class="col-md">Auto Column 3</div>
    </div>
</div>

Explanation: Columns will distribute space equally on medium and larger devices, but stack vertically on smaller screens.

Complete Auto Layout Example

The following example demonstrates various auto layout configurations, including mixed and responsive layouts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Auto Layout Example</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 Auto Layout</h2>
        <div class="row mb-3">
            <div class="col">Column 1</div>
            <div class="col">Column 2</div>
            <div class="col">Column 3</div>
        </div>
        <div class="row mb-3">
            <div class="col-4">Fixed Column</div>
            <div class="col">Auto Column</div>
        </div>
        <div class="row">
            <div class="col-md">Responsive Column 1</div>
            <div class="col-md">Responsive Column 2</div>
            <div class="col-md">Responsive Column 3</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 how to use auto layout for equal-width columns, mix auto and fixed columns, and make the layout responsive across breakpoints.

Key Takeaways

  • Use the .col class for auto-layout columns that dynamically adjust their width.
  • Combine .col with fixed column classes for mixed layouts.
  • Apply breakpoint-specific auto-layout classes like .col-md for responsive designs.
Prev Next