Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

Bootstrap Grid System

Rows, columns and responsive layouts.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯

The grid has 12 columns. Put columns inside a .row, inside a container.

  • .col: equal-width columns.
  • .col-4: 4 of 12 columns (one third).
  • .col-md-6: half width from the md breakpoint up; full width on phones.
  • .g-3 on the row adds gutters (spacing).
Resize the result pane (press Layout) to watch columns stack on small screens.

Key Takeaways: Bootstrap Grid System

Mastering Bootstrap Grid System helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

Bootstrap Grid System Code Example

Bootstrap 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style> .box { background: #E9D5FF; border: 1px solid #7952B3; padding: 12px; text-align: center; } </style>
<div class="container py-3">
  <div class="row g-2 mb-2">
    <div class="col"><div class="box">col</div></div>
    <div class="col"><div class="box">col</div></div>
    <div class="col"><div class="box">col</div></div>
  </div>
  <div class="row g-2 mb-2">
    <div class="col-8"><div class="box">col-8</div></div>
    <div class="col-4"><div class="box">col-4</div></div>
  </div>
  <div class="row g-2">
    <div class="col-12 col-md-6 col-lg-3"><div class="box">12 / md-6 / lg-3</div></div>
    <div class="col-12 col-md-6 col-lg-3"><div class="box">12 / md-6 / lg-3</div></div>
    <div class="col-12 col-md-6 col-lg-3"><div class="box">12 / md-6 / lg-3</div></div>
    <div class="col-12 col-md-6 col-lg-3"><div class="box">12 / md-6 / lg-3</div></div>
  </div>
</div>
Free sign-in required · Google login available

Bootstrap Grid System Practice Exercises

Check what you learned in “Bootstrap Grid System”.

/ 3 solved
Fill in the blank

Columns must be placed inside a…

<div class="">
  <div class="col">A</div>
</div>
✓ Correct! Not quite. Try again.
Multiple choice

How many columns does the Bootstrap grid have?

✓ Correct! Not quite. Try again.
Code challenge

Inside the row, create two columns: col-8 and col-4.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
Bootstrap Containers
Next ❯
Bootstrap Typography

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services