0
0
Bootsrapmarkup~5 mins

Mixing column widths in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Mixing column widths helps you create flexible layouts that fit different content sizes. It lets you combine fixed and flexible parts on the same row.

You want a sidebar with a fixed width and a main content area that fills the rest.
You need a form where labels take less space and inputs take more space.
You want to show a small image next to a larger text block.
You want to create a header with a logo on the left and navigation on the right with different widths.
Syntax
Bootsrap
<div class="row">
  <div class="col-[size]-[number]">Content</div>
  <div class="col-[size]-[number]">Content</div>
</div>

Replace [size] with breakpoint like sm, md, lg, or leave empty for all sizes.

Replace [number] with a number from 1 to 12 to set column width.

Examples
This creates a row with two columns: one takes 4 parts, the other 8 parts of the row width.
Bootsrap
<div class="row">
  <div class="col-4">Sidebar</div>
  <div class="col-8">Main content</div>
</div>
On medium screens and up, the first column is 3 parts wide, the second is 9 parts wide.
Bootsrap
<div class="row">
  <div class="col-md-3">Menu</div>
  <div class="col-md-9">Content</div>
</div>
On small screens, both columns take half width each. On medium and larger, widths change to 4 and 8 parts.
Bootsrap
<div class="row">
  <div class="col-6 col-md-4">Box 1</div>
  <div class="col-6 col-md-8">Box 2</div>
</div>
Sample Program

This page shows a row with three columns of different widths: sidebar, main content, and ads. Each column has a background color to see the widths clearly.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mixing Column Widths Example</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>Mixing Column Widths</h1>
    <div class="row border p-3">
      <div class="col-3 bg-primary text-white p-3">Sidebar (3/12 width)</div>
      <div class="col-6 bg-success text-white p-3">Main Content (6/12 width)</div>
      <div class="col-3 bg-warning p-3">Ads (3/12 width)</div>
    </div>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Column widths always add up to 12 parts per row for a full line.

If columns don't add to 12, Bootstrap fills the rest with empty space.

Use background colors or borders to see column sizes clearly during development.

Summary

Mix column widths by assigning different col-* classes to columns.

Widths are fractions of 12 parts per row.

Use responsive classes like col-md-* to change widths on different screen sizes.