Prev Next

Equal-Width Columns: Utilizing col for Auto-Adjusted Equal-Width Columns

Bootstrap 5’s col class creates equal-width columns that automatically adjust their size based on the available space. This is especially useful when you need all columns in a row to have the same width without defining explicit sizes.

Key Topics

Basic Equal-Width Columns

Use the col class to create equal-width columns that fill the available space equally.

<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: Each column adjusts its width equally to fill the row, regardless of content size.

Combining Equal-Width and Fixed Columns

Mix equal-width columns with fixed-width columns to create more flexible layouts.

<div class="container">
    <div class="row">
        <div class="col-4">Fixed Column</div>
        <div class="col">Equal-Width Column</div>
        <div class="col">Equal-Width Column</div>
    </div>
</div>

Explanation: The fixed-width column occupies 4 grid units, while the remaining columns share the remaining space equally.

Responsive Equal-Width Columns

Use breakpoint-specific classes like col-md to create equal-width columns that adapt to different screen sizes.

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

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

Complete Equal-Width Columns Example

The following example demonstrates equal-width columns in different 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 Equal-Width Columns 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 Equal-Width Columns</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">Equal-Width Column</div>
            <div class="col">Equal-Width 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 equal-width columns effectively, in combination with fixed-width and responsive columns.

Key Takeaways

  • Use the .col class to create equal-width columns that adjust automatically to available space.
  • Combine .col with fixed-width columns for mixed layouts.
  • Use responsive classes like .col-md for equal-width columns across different screen sizes.
Prev Next