.ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺩﻮﺟﻭ ﻪﺤﻔﺻ ﺮﺳﺍﺮﺳ ﺭﺩ ﻥﻮﺘﺳ 12 ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﻭ ﺖﺳﺍ ﻩﺪﺷ ﻪﺘﺧﺎﺳ flexbox
:ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﯼﺮﺗ ﻊﯿﺳﻭ ﯼﺎﻫ ﻥﻮﺘﺳ ﺎﺗ ﺪﯿﻨﮐ ﯼﺪﻨﺑ ﻩﻭﺮﮔ ﻢﻫ ﺎﺑ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ،ﺪﯿ
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
.ﺪﻧﻮﺷ ﯽﻣ ﺐﺗﺮﻣ ﺭﺎﮐﺩﻮﺧ ﺭﻮﻃ ﻪﺑ ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ ﻩﺯﺍﺪﻧﺍ ﻪﺑ ﻪﺘﺴﺑ ﺎﻫ ﻥﻮﺘﺳ ﻭ ﺖﺳﺍ ﻮﮕﺨﺳﺎﭘ ﯼﺍ
.(ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺩﻮﺟﻮﻣ ﻥﻮﺘﺳ 12 ﻡﺎﻤﺗ ﺯﺍ ﻪﮐ ﺖﺴﯿﻧ ﯽﻣﺍﺰﻟﺍ) ﺪﺷﺎﺑ ﺮﺘﻤﮐ ﺎﯾ 12 ﻉﻮﻤﺠﻣ ﻪﮐ
:ﺖﺳﺍ ﺱﻼﮐ ﺶﺷ ﯼﺍﺭﺍﺩ Bootstrap 5 ﻪﮑﺒﺷ ﻢﺘﺴﯿﺳ
.col- (ﻞﺴﮑﯿﭘ 576 ﺯﺍ ﺮﺘﻤﮐ ﻪﺤﻔﺻ ﺽﺮﻋ - ﮏﭼﻮﮐ ﺭﺎﯿﺴ
.col-sm- (ﻩﺎﮕﺘﺳﺩﻞﺴﮑﯿﭘ 576 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮﺑ
.col-md- (ﻞﺴﮑﯿﭘ 768 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮﺑﺍﺮﺑ ﻪﺤﻔﺻ ﺽﺮ
.col-lg- (ﻞﺴﮑﯿﭘ 992 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮﺑﺍﺮﺑ ﻪﺤﻔﺻ ﺽﺮ
.col-xl- (ﻩﺎﮕﺘﺳﺩﻞﺴﮑﯿﭘ 1200 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮ
.col-xxl- (ﻩﺎﮕﺘﺳﺩﯼﺎﻫ xxlarge - ﻞﺴﮑﯿﭘ 140
.ﺩﺮﮐ ﺐﯿﮐﺮﺗ ﺮﺗﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻭ ﺮﺗﺎﯾﻮﭘ ﯼﺪﻨﺑ ﺡﺮﻃ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﻻﺎﺑ ﯼﺎﻫ ﺱﻼﮐ
ﻪﺘﮑﻧ: ﯼﺍﺮﺑ ﺍﺭ ﯽﻧﺎﺴﮑﯾ ﯼﺎﻫ ﺽﺮﻋ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﺮﮔﺍ ﻦﯾﺍﺮﺑﺎﻨﺑ ،ﺪﺑﺎﯾ ﯽﻣ
:ﺖﺳﺍ Bootstrap 5 ﻪﮑﺒﺷ ﮏﯾ ﺮﯾﺯ ﺭﺎﺘﺧﺎﺳ
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Basic Grid Structure</h1>
<p>Resize the browser window to see the effect.</p>
<p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6 bg-primary text-white">50%</div>
<div class="col-sm-6 bg-dark text-white">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 bg-primary text-white">33.33%</div>
<div class="col-sm-4 bg-dark text-white">33.33%</div>
<div class="col-sm-4 bg-primary text-white">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
</div>
<br>
<div class="row">
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
</div>
</div>
</body>
</html>
.ﺩﻮﺷ ﻊﻤﺟ 12 ﻒﯾﺩﺭ ﺮﻫ ﯼﺍﺮﺑ ﺪﯾﺎﺑ ﻪﮐ ﺖﺳﺍ ﺩﺪﻋ ﮏﯾ ﻩﺪﻨﻫﺩ ﻥﺎﺸﻧ ﻡﻭﺩ ﻩﺭﺎﺘﺳ ﻪﮐ ﯽﻟﺎﺣ ﺭﺩ ،x
.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻫ ﻥﻮﺘﺳ ﻥﺩﺮﮐ ﻮﮕﺨﺳﺎﭘ ﯼﺍﺮﺑ .col-sm|md|lg
:ﺪﻨﮐ ﯽﻣ ﻪﺻﻼﺧ ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﻩﺯﺍﺪﻧﺍ ﺭﺩ ﺍﺭ Bootstrap 5 ﻪﮑﺒﺷ ﻢﺘﺴﯿﺳ ﺩﺮﮑﻠﻤﻋ ﻩ
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | XXL (>=1400px) | |
|---|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes | Yes |