Container و Grid در Bootstrap
بهنام نوبخت · ۱۴۰۵/۷/۱۲
در مقاله قبل با Bootstrap آشنا شدیم و یاد گرفتیم چگونه آن را به یک صفحه HTML اضافه کنیم. یکی از مهم‌ترین ویژگی‌های Bootstrap، سیستم Grid آن است که به ما اجازه می‌دهد محتوای صفحه را به شکل منظم و Responsive در ستون‌های مختلف قرار دهیم. در این مقاله با مفاهیم Container، Row و Column آشنا می‌شویم و یاد می‌گیریم چگونه Layout صفحات وب را با Bootstrap ایجاد کنیم. در پایان مقاله می‌توانیم ساختارهایی مانند چند ستون کنار هم، کارت‌های Responsive، بخش‌های مختلف یک صفحه و Layoutهای متناسب با موبایل، تبلت و دسکتاپ ایجاد کنیم.
Container چیست؟
در Bootstrap، کلاس container برای قرار دادن محتوای صفحه در یک محدوده مشخص استفاده می‌شود.
به عنوان مثال:
<div class="container">
<h1>My Website</h1>
<p>Welcome to my website.</p>
</div>اگر صفحه مرورگر بسیار عریض باشد، استفاده از container باعث می‌شود محتوای صفحه بیش از حد کشیده نشود.
به صورت ساده:
Browser
+------------------------------------------------------+
| |
| +------------------------------------+ |
| | Container | |
| | | |
| | Page Content | |
| | | |
| +------------------------------------+ |
| |
+------------------------------------------------------+Container یکی از اولین ابزارهایی است که هنگام ساخت Layout با Bootstrap با آن کار خواهیم کرد.
چرا به Container نیاز داریم؟
فرض کنید یک صفحه بدون محدودیت عرض ایجاد کنیم:
<body>
<h1>My Website</h1>
<p>
Welcome to my website.
</p>
</body>در یک نمایشگر بزرگ، محتوا ممکن است بیش از حد در عرض صفحه پخش شود.
اما با استفاده از:
<div class="container">
...
</div>محتوا در یک محدوده مناسب قرار می‌گیرد.
این موضوع باعث می‌شود خوانایی محتوا و ساختار ظاهری صفحه بهتر شود.
انواع Container در Bootstrap
Bootstrap چند نوع Container در اختیار ما قرار می‌دهد.
container
رایج‌ترین نوع Container:
<div class="container">
Content
</div>container-fluid
اگر بخواهیم Container تقریباً تمام عرض صفحه را اشغال کند، از container-fluid استفاده می‌کنیم:
<div class="container-fluid">
Content
</div>ساختار آن به صورت ساده:
container
+--------------------------------+
| Content |
+--------------------------------+
container-fluid
+----------------------------------------------+
| Content |
+----------------------------------------------+Container با Breakpoint مشخص
Bootstrap امکان ایجاد Containerهایی را نیز فراهم می‌کند که از یک Breakpoint مشخص به بعد رفتار متفاوتی داشته باشند.
برای مثال:
<div class="container-md">
Content
</div>در این حالت رفتار Container بر اساس Breakpoint md تغییر می‌کند.
در ادامه دوره، مفهوم Breakpointها را دقیق‌تر بررسی خواهیم کرد.
Row چیست؟
بعد از Container معمولاً با مفهوم row روبه‌رو می‌شویم.
row برای ایجاد یک ردیف در سیستم Grid استفاده می‌شود.
برای مثال:
<div class="container">
<div class="row">
</div>
</div>در اینجا ساختار ما به شکل زیر است:
Container
|
+---- Rowاما Row به تنهایی معمولاً کاربرد زیادی ندارد.
ما از داخل Row برای قرار دادن Columnها استفاده می‌کنیم.
Column چیست؟
Column یا ستون، بخشی از یک Row است.
برای مثال:
<div class="container">
<div class="row">
<div class="col">
Column 1
</div>
<div class="col">
Column 2
</div>
</div>
</div>در این مثال دو Column داریم.
Bootstrap فضای موجود را بین آن‌ها تقسیم می‌کند.
نتیجه مفهومی:
+------------------------------------------+
| Container |
| |
| +------------------+------------------+ |
| | Column 1 | Column 2 | |
| | | | |
| +------------------+------------------+ |
| |
+------------------------------------------+سیستم 12 ستونه Bootstrap
یکی از مهم‌ترین مفاهیم Grid در Bootstrap این است که یک Row به 12 ستون منطقی تقسیم می‌شود.
یعنی:
+----+----+----+----+----+----+----+----+----+----+----+----+
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
+----+----+----+----+----+----+----+----+----+----+----+----+البته این 12 ستون لزوماً به صورت 12 ستون جداگانه در صفحه دیده نمی‌شوند.
ما می‌توانیم چند ستون را با هم ترکیب کنیم.
برای مثال:
<div class="row">
<div class="col-6">
Left
</div>
<div class="col-6">
Right
</div>
</div>هر Column شش واحد از 12 واحد را اشغال می‌کند.
بنابراین:
6 + 6 = 12و نتیجه:
+----------------------+----------------------+
| Column 6 | Column 6 |
| | |
+----------------------+----------------------+ساخت دو ستون مساوی
یکی از ساده‌ترین کاربردهای Grid ایجاد دو ستون مساوی است.
<div class="container">
<div class="row">
<div class="col-6">
<h2>About Us</h2>
<p>
Information about our company.
</p>
</div>
<div class="col-6">
<h2>Our Services</h2>
<p>
Information about our services.
</p>
</div>
</div>
</div>در این مثال هر ستون 6 واحد از 12 واحد را می‌گیرد.
ساخت سه ستون مساوی
اگر بخواهیم سه ستون مساوی ایجاد کنیم، می‌توانیم از col-4 استفاده کنیم.
<div class="row">
<div class="col-4">
Column 1
</div>
<div class="col-4">
Column 2
</div>
<div class="col-4">
Column 3
</div>
</div>زیرا:
4 + 4 + 4 = 12نتیجه:
+-------------+-------------+-------------+
| Column 1 | Column 2 | Column 3 |
| | | |
+-------------+-------------+-------------+ساخت چهار ستون مساوی
برای چهار ستون مساوی:
<div class="row">
<div class="col-3">
Column 1
</div>
<div class="col-3">
Column 2
</div>
<div class="col-3">
Column 3
</div>
<div class="col-3">
Column 4
</div>
</div>چون:
3 + 3 + 3 + 3 = 12اگر مجموع ستون‌ها بیشتر از 12 شود چه اتفاقی می‌افتد؟
فرض کنید چنین کدی داشته باشیم:
<div class="row">
<div class="col-8">
Column 1
</div>
<div class="col-8">
Column 2
</div>
</div>مجموع می‌شود:
8 + 8 = 16چون مقدار 16 بیشتر از 12 است، Bootstrap ستون دوم را به خط بعد منتقل می‌کند.
به صورت مفهومی:
Row
+--------------------------------+
| Column 8 |
+--------------------------------+
| Column 8 |
+--------------------------------+این رفتار یکی از ویژگی‌های مفید سیستم Grid است.
Column بدون تعیین اندازه
در Bootstrap می‌توانیم فقط از col استفاده کنیم.
برای مثال:
<div class="row">
<div class="col">
Column 1
</div>
<div class="col">
Column 2
</div>
<div class="col">
Column 3
</div>
</div>Bootstrap فضای موجود را بین ستون‌ها تقسیم می‌کند.
این روش برای زمانی مناسب است که می‌خواهیم ستون‌ها به صورت مساوی فضای موجود را تقسیم کنند.
ترکیب Columnهای مختلف
لازم نیست تمام Columnها اندازه یکسان داشته باشند.
برای مثال:
<div class="row">
<div class="col-8">
Main Content
</div>
<div class="col-4">
Sidebar
</div>
</div>در اینجا:
8 + 4 = 12پس Layout به این صورت خواهد بود:
+--------------------------------+----------+
| Main Content | Sidebar |
| | |
+--------------------------------+----------+این ساختار در وب‌سایت‌ها بسیار رایج است.
ساخت Main Content و Sidebar
مثلاً:
<div class="container">
<div class="row">
<main class="col-8">
<h1>Article Title</h1>
<p>
This is the main article content.
</p>
</main>
<aside class="col-4">
<h2>Sidebar</h2>
<p>
Related content.
</p>
</aside>
</div>
</div>این ساختار می‌تواند پایه یک صفحه مقاله یا وبلاگ باشد.
Responsive Grid چیست؟
یکی از مهم‌ترین قابلیت‌های Grid، امکان تعریف اندازه متفاوت Columnها در اندازه‌های مختلف صفحه است.
برای مثال ممکن است بخواهیم:
در موبایل یک ستون داشته باشیم.
در تبلت دو ستون داشته باشیم.
در دسکتاپ چهار ستون داشته باشیم.
Bootstrap این کار را با Breakpointها بسیار ساده می‌کند.
برای مثال:
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
Box 1
</div>
<div class="col-12 col-md-6 col-lg-3">
Box 2
</div>
<div class="col-12 col-md-6 col-lg-3">
Box 3
</div>
<div class="col-12 col-md-6 col-lg-3">
Box 4
</div>
</div>این مثال بسیار مهم است؛ زیرا یکی از الگوهای رایج در طراحی Responsive با Bootstrap را نشان می‌دهد.
معنی col-12 چیست؟
کلاس:
col-12یعنی Column در کوچک‌ترین اندازه صفحه، تمام 12 واحد را اشغال کند.
بنابراین:
Mobile
+----------------------+
| Box 1 |
+----------------------+
| Box 2 |
+----------------------+
| Box 3 |
+----------------------+
| Box 4 |
+----------------------+معنی col-md-6 چیست؟
کلاس:
col-md-6یعنی از Breakpoint md به بعد، Column شش واحد از 12 واحد را اشغال کند.
در نتیجه دو Column کنار هم قرار می‌گیرند:
Tablet
+------------------+------------------+
| Box 1 | Box 2 |
+------------------+------------------+
| Box 3 | Box 4 |
+------------------+------------------+معنی col-lg-3 چیست؟
کلاس:
col-lg-3یعنی از Breakpoint lg به بعد، Column سه واحد از 12 واحد را اشغال کند.
بنابراین چهار Column در یک ردیف قرار می‌گیرند:
Desktop
+---------+---------+---------+---------+
| Box 1 | Box 2 | Box 3 | Box 4 |
+---------+---------+---------+---------+این یعنی با یک HTML می‌توانیم Layoutهای مختلفی برای اندازه‌های مختلف صفحه داشته باشیم.
Breakpointهای Bootstrap
Bootstrap دارای Breakpointهای استانداردی است که برای طراحی Responsive استفاده می‌شوند.
مقادیر رایج عبارت‌اند از:
xs
sm
md
lg
xl
xxlدر Bootstrap 5، Breakpointهای اصلی به صورت زیر هستند:
Breakpoint | Minimum Width |
|---|---|
xs | کمتر از 576px |
sm | 576px |
md | 768px |
lg | 992px |
xl | 1200px |
xxl | 1400px |
نکته مهم این است که xs معمولاً به صورت پیش‌فرض و بدون پسوند نوشته می‌شود.
برای مثال:
col-12به عنوان حالت پایه استفاده می‌شود.
اما برای اندازه‌های دیگر می‌توانیم بنویسیم:
col-sm-6
col-md-4
col-lg-3یک مثال واقعی Responsive
فرض کنید می‌خواهیم چهار کارت محصول ایجاد کنیم.
در موبایل:
+-------------------+
| Product 1 |
+-------------------+
| Product 2 |
+-------------------+
| Product 3 |
+-------------------+
| Product 4 |
+-------------------+در تبلت:
+----------------+----------------+
| Product 1 | Product 2 |
+----------------+----------------+
| Product 3 | Product 4 |
+----------------+----------------+در دسکتاپ:
+---------+---------+---------+---------+
| Product | Product | Product | Product |
| 1 | 2 | 3 | 4 |
+---------+---------+---------+---------+کد:
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<div class="border p-3">
Product 1
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="border p-3">
Product 2
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="border p-3">
Product 3
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="border p-3">
Product 4
</div>
</div>
</div>
</div>این یکی از کاربردی‌ترین الگوهای Bootstrap Grid است.
Gutters چیست؟
فاصله بین Columnها در Bootstrap با مفهوم Gutter شناخته می‌شود.
برای مثال:
<div class="row">
<div class="col-6">
<div class="border">
Box 1
</div>
</div>
<div class="col-6">
<div class="border">
Box 2
</div>
</div>
</div>Bootstrap به صورت پیش‌فرض برای Grid فاصله‌هایی در نظر می‌گیرد.
می‌توانیم این فاصله را نیز کنترل کنیم.
تغییر فاصله Grid
Bootstrap کلاس‌هایی برای کنترل فاصله بین ستون‌ها در اختیار ما قرار می‌دهد.
برای مثال:
<div class="row g-3">
<div class="col-6">
<div class="border p-3">
Box 1
</div>
</div>
<div class="col-6">
<div class="border p-3">
Box 2
</div>
</div>
</div>کلاس:
g-3برای کنترل فاصله Gutter در هر دو جهت استفاده می‌شود.
کلاس‌های دیگری مانند:
gx-3و:
gy-3نیز وجود دارند.
gx برای فاصله افقی و gy برای فاصله عمودی استفاده می‌شود.
Nested Grid
یکی از قابلیت‌های کاربردی Bootstrap این است که می‌توانیم یک Grid را داخل Column دیگر قرار دهیم.
برای مثال:
<div class="container">
<div class="row">
<div class="col-8">
<h2>Main Content</h2>
<div class="row">
<div class="col-6">
Box 1
</div>
<div class="col-6">
Box 2
</div>
</div>
</div>
<div class="col-4">
Sidebar
</div>
</div>
</div>ساختار آن:
Container
|
+---- Row
|
+---- Column 8
| |
| +---- Nested Row
| |
| +---- Column 6
| +---- Column 6
|
+---- Column 4این قابلیت برای ساخت Layoutهای پیچیده‌تر بسیار مفید است.
استفاده از Grid برای ساخت Dashboard
فرض کنید می‌خواهیم یک Dashboard ساده بسازیم.
<div class="container">
<div class="row g-3">
<div class="col-12 col-md-6 col-lg-3">
<div class="border p-4">
<h3>Users</h3>
<p>1,250</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="border p-4">
<h3>Orders</h3>
<p>850</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="border p-4">
<h3>Products</h3>
<p>320</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="border p-4">
<h3>Revenue</h3>
<p>$25,000</p>
</div>
</div>
</div>
</div>این Layout در موبایل، تبلت و دسکتاپ رفتار متفاوتی خواهد داشت.
اشتباه رایج در استفاده از Grid
یکی از اشتباهات رایج این است که col را مستقیماً داخل container قرار دهیم:
<div class="container">
<div class="col-6">
Content
</div>
</div>بهتر است ساختار Grid را به صورت زیر ایجاد کنیم:
<div class="container">
<div class="row">
<div class="col-6">
Content
</div>
</div>
</div>یعنی در ساختار استاندارد:
Container
|
+---- Row
|
+---- Columnتفاوت Container، Row و Column
برای اینکه این سه مفهوم را به خاطر بسپاریم:
Container
محدوده اصلی محتوا را ایجاد می‌کند.
Row
یک ردیف در Grid ایجاد می‌کند.
Column
بخش‌های مختلف آن Row را ایجاد می‌کند.
به صورت خلاصه:
Container
|
+---- Row
|
+---- Column
+---- Column
+---- Columnاین ساختار پایه بسیاری از صفحات Bootstrap است.
یک مثال کامل
در این مثال یک صفحه ساده با Header، Main Content، Sidebar و Footer ایجاد می‌کنیم:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid Example</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<header class="container py-4">
<div class="row">
<div class="col-12">
<h1>My Website</h1>
</div>
</div>
</header>
<main class="container">
<div class="row g-4">
<div class="col-12 col-lg-8">
<h2>Main Content</h2>
<p>
This is the main content area of the website.
</p>
</div>
<aside class="col-12 col-lg-4">
<h2>Sidebar</h2>
<p>
This is the sidebar area.
</p>
</aside>
</div>
</main>
<footer class="container py-4">
<div class="row">
<div class="col-12 text-center">
<p>
Copyright 2026
</p>
</div>
</div>
</footer>
</body>
</html>در این مثال، در صفحه‌های کوچک Main Content و Sidebar زیر یکدیگر قرار می‌گیرند و در صفحه‌های بزرگ‌تر کنار یکدیگر نمایش داده می‌شوند.
نکات مهم Grid
هنگام کار با Bootstrap Grid این نکات را به خاطر داشته باشید:
Grid Bootstrap بر پایه 12 واحد ساخته شده است.
معمولاً
containerشاملrowاست.معمولاً
rowشاملcolumnها است.مجموع Columnهای یک Row بهتر است متناسب با 12 واحد تنظیم شود.
col-6یعنی 6 واحد از 12 واحد.col-4یعنی 4 واحد از 12 واحد.col-3یعنی 3 واحد از 12 واحد.col-12برای گرفتن تمام عرض Row کاربرد دارد.می‌توان برای Breakpointهای مختلف اندازه‌های متفاوت تعریف کرد.
g-*برای کنترل Gutter کاربرد دارد.Grid می‌تواند داخل Column دیگری نیز قرار بگیرد.
تمرین عملی
یک صفحه برای یک فروشگاه اینترنتی ایجاد کنید.
صفحه باید شامل 8 محصول باشد.
برای هر محصول یک Box ایجاد کنید.
در موبایل:
Product
Product
Product
Product
...در تبلت دو محصول در هر ردیف:
Product | Product
Product | Product
...و در دسکتاپ چهار محصول در هر ردیف:
Product | Product | Product | Product
Product | Product | Product | Productبرای پیاده‌سازی این رفتار می‌توانید از ساختار زیر استفاده کنید:
<div class="col-12 col-md-6 col-lg-3">
...
</div>همچنین برای فاصله بین محصولات از:
g-3استفاده کنید.
جمع‌بندی
در این مقاله با یکی از مهم‌ترین بخش‌های Bootstrap یعنی Grid System آشنا شدیم.
یاد گرفتیم که container برای ایجاد محدوده مناسب محتوا، row برای ایجاد ردیف و col برای ایجاد ستون استفاده می‌شود.
همچنین با سیستم 12 ستونه Bootstrap آشنا شدیم و یاد گرفتیم چگونه با کلاس‌هایی مانند col-6، col-4 و col-3 ستون‌های مختلف ایجاد کنیم.
در ادامه، مفهوم Responsive Grid را بررسی کردیم و یاد گرفتیم چگونه با کلاس‌هایی مانند col-12 col-md-6 col-lg-3 یک Layout ایجاد کنیم که در موبایل، تبلت و دسکتاپ رفتار متفاوتی داشته باشد.
نظرات
هنوز نظری ثبت نشده است.