0
0
Bootsrapmarkup~5 mins

Auto-sizing columns in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Auto-sizing columns help your webpage look neat by making columns only as wide as their content needs. This keeps your layout clean and balanced.

When you want a column to fit just the text or buttons inside it without extra space.
When you have a mix of fixed and flexible columns and want some columns to size automatically.
When you want to avoid columns stretching too wide on large screens.
When you want a responsive layout that adjusts column widths based on content.
When you want to keep small items like icons or labels from taking too much space.
Syntax
Bootsrap
<div class="row">
  <div class="col-auto">Content</div>
  <div class="col">Flexible content</div>
</div>

Use col-auto class to make a column auto-size to its content.

Other columns with col will take the remaining space.

Examples
The first column fits just the word "Short". The second column fills the rest.
Bootsrap
<div class="row">
  <div class="col-auto">Short</div>
  <div class="col">Longer content here</div>
</div>
Two auto-sized columns for small items, and one flexible column for main content.
Bootsrap
<div class="row">
  <div class="col-auto">Button</div>
  <div class="col-auto">Icon</div>
  <div class="col">Main content</div>
</div>
Label column auto-sizes, input field column takes remaining space.
Bootsrap
<div class="row">
  <div class="col-auto">Label:</div>
  <div class="col">Input field</div>
</div>
Sample Program

This page shows a row with two columns. The first column uses col-auto so it only takes as much space as the word "Auto" needs. The second column uses col and fills the rest of the row. The background colors help you see the column sizes clearly.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Auto-sizing Columns</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <h1>Auto-sizing Columns Example</h1>
    <div class="row align-items-center border p-3">
      <div class="col-auto bg-light border p-2">Auto</div>
      <div class="col bg-secondary text-white p-2">Flexible column fills remaining space</div>
    </div>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Auto-sized columns shrink or grow exactly to fit their content.

Use background colors or borders to see column sizes while developing.

Combine col-auto with other col classes for flexible layouts.

Summary

Auto-sizing columns use col-auto to fit content width.

They help keep layouts neat and responsive.

Combine with flexible columns for balanced designs.