0
0
Bootsrapmarkup~5 mins

Why a grid system matters in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

A grid system helps arrange content neatly on a webpage. It makes your design look organized and easy to follow.

When you want your website to look good on phones, tablets, and computers.
When you need to place text, images, and buttons in a balanced way.
When you want to save time by using ready-made layout rules.
When you want your webpage to adjust automatically to different screen sizes.
When you want to keep your design consistent across pages.
Syntax
Bootsrap
Use Bootstrap classes like .container, .row, and .col to create a grid layout.
Example:
<div class="container">
  <div class="row">
    <div class="col">Content 1</div>
    <div class="col">Content 2</div>
  </div>
</div>
The .container class centers your content and adds padding.
The .row class groups columns horizontally.
The .col class divides the row into equal parts automatically.
Examples
This creates three equal columns side by side inside a container.
Bootsrap
<div class="container">
  <div class="row">
    <div class="col">One</div>
    <div class="col">Two</div>
    <div class="col">Three</div>
  </div>
</div>
This creates two columns each taking half the row's width.
Bootsrap
<div class="container">
  <div class="row">
    <div class="col-6">Half width</div>
    <div class="col-6">Half width</div>
  </div>
</div>
This layout changes on medium and larger screens, dividing the row into 4 and 8 parts out of 12.
Bootsrap
<div class="container">
  <div class="row">
    <div class="col-md-4">One third on medium screens</div>
    <div class="col-md-8">Two thirds on medium screens</div>
  </div>
</div>
Sample Program

This example shows a simple page with a header, a two-column main area that stacks on small screens, and a footer. The grid system makes the content adjust nicely on different devices.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Grid Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <header class="bg-primary text-white text-center p-3">
    <h1>My Grid Layout</h1>
  </header>
  <main class="container mt-4">
    <div class="row">
      <div class="col-12 col-md-6 bg-light border p-3">Left side content</div>
      <div class="col-12 col-md-6 bg-secondary text-white border p-3">Right side content</div>
    </div>
  </main>
  <footer class="bg-dark text-white text-center p-2 mt-4">
    Footer area
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Bootstrap's grid uses 12 columns by default, so column widths add up to 12.

Using responsive classes like col-md-6 helps your layout change on different screen sizes.

Always wrap rows inside a container for proper alignment and padding.

Summary

A grid system helps organize webpage content clearly and neatly.

Bootstrap's grid uses rows and columns to create flexible layouts.

Responsive classes make your design look good on all devices.