0
0
Bootsrapmarkup~5 mins

12-column grid model in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The 12-column grid model helps you organize content on a webpage in neat, equal parts. It makes your page look balanced and easy to read on all devices.

When you want to divide a webpage into sections that line up nicely.
When you need your layout to adjust smoothly on phones, tablets, and computers.
When you want to create columns of different widths that add up to the full page width.
When you want to build responsive designs without writing complex CSS.
When you want to quickly arrange text, images, or buttons side by side.
Syntax
Bootsrap
<div class="container">
  <div class="row">
    <div class="col-4">Content here</div>
    <div class="col-8">More content here</div>
  </div>
</div>

The grid is based on 12 equal parts called columns.

You add up the numbers in col-* classes to 12 or less per row.

Examples
This divides the row into two equal halves.
Bootsrap
<div class="row">
  <div class="col-6">Half width</div>
  <div class="col-6">Half width</div>
</div>
This divides the row into one quarter and three quarters.
Bootsrap
<div class="row">
  <div class="col-3">One quarter</div>
  <div class="col-9">Three quarters</div>
</div>
This divides the row into three equal parts.
Bootsrap
<div class="row">
  <div class="col-4">One third</div>
  <div class="col-4">One third</div>
  <div class="col-4">One third</div>
</div>
Sample Program

This example shows three rows with different column widths using the 12-column grid. Each colored box shows how many columns it takes.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap 12-Column Grid Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    .box {
      background-color: #007bff;
      color: white;
      padding: 1rem;
      text-align: center;
      border-radius: 0.25rem;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <main class="container mt-4">
    <h1 class="mb-4">12-Column Grid Model</h1>
    <div class="row">
      <div class="col-4 box">4 columns wide</div>
      <div class="col-8 box">8 columns wide</div>
    </div>
    <div class="row">
      <div class="col-3 box">3 columns</div>
      <div class="col-3 box">3 columns</div>
      <div class="col-3 box">3 columns</div>
      <div class="col-3 box">3 columns</div>
    </div>
    <div class="row">
      <div class="col-6 box">6 columns</div>
      <div class="col-6 box">6 columns</div>
    </div>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always wrap your rows inside a .container or .container-fluid for proper alignment.

Use .row to group columns horizontally.

Columns stack vertically on small screens by default, making your design mobile-friendly.

Summary

The 12-column grid divides the page width into 12 equal parts.

You combine columns by adding their numbers to 12 or less per row.

This system helps create neat, responsive layouts easily.