Bootstrap 5: Grid Examps

فهرست مطالب

    نمایش فهرست مطالب

.ﻢﯾﺍ ﻩﺩﺮﮐ ﯼﺭﻭﺁ ﻊﻤﺟ ﺍﺭ 5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ ﻪﮑﺒﺷ ﯼﺪﻨﺑ ﺡﺮﻃ ﺯﺍ ﯽﯾﺎﻫ ﻪﻧﻮﻤﻧ ﺮﯾﺯ ﺭﺩ

ﯼﻭﺎﺴﻣ ﻥﻮﺘﺳ ﻪﺳ

.ﺖﺳﺍ ﺪﺻﺭﺩ 33.33 ﻡﺍﺪﮐ ﺮﻫ ﺽﺮﻋ ﻪﮐ ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ col ﺮﺼﻨﻋ ﻪﺳ ﺯﺍ ﺮﯾﺯ ﻝﺎﺜﻣ ﺭﺩ .(ﺪﻨ

col
col
col

ﻝﺎﺜﻣ

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">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">
  <h2>Three Equal Columns</h2>
  <p>Use the .col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.</p>
  <div class="row">
    <div class="col bg-success">.col</div>
    <div class="col bg-warning">.col</div>
    <div class="col bg-success">.col</div>
  </div>
</div>

</body>
</html>

ﺩﺍﺪﻋﺍ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﯼﻭﺎﺴﻣ ﻥﻮﺘﺳ ﻪﺳ

:(ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺩﻮﺟﻮﻣ ﻥﻮﺘﺳ 12 ﻡﺎﻤﺗ ﺯﺍ ﺖﺴﯿﻧ ﻡﺯﻻ) ﺪﺷﺎﺑ ﺮﺘﻤﮐ ﺎﯾ 12 ﻉﻮﻤﺠﻣ ﻪﮐ ﺪﯾﻮﺷ ﻦ

col-4
col-4
col-4

ﻝﺎﺜﻣ

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</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">
  <h2>Three Equal Columns</h2>
  <p>You can also use numbers to control the column width. Just make sure that the sum always adds up to 12:</p>
  <div class="row">
    <div class="col-4 bg-success">.col-4</div>
    <div class="col-4 bg-warning">.col-4</div>
    <div class="col-4 bg-success">.col-4</div>
  </div>
</div>

</body>
</html>

ﺮﺑﺍﺮﺑﺎﻧ ﻥﻮﺘﺳ ﻪﺳ

:ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ %25/%50/%25 ﻢﯿﺴﻘﺗ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ .ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺍﺪﻋﺍ ﺯﺍ ﺪﯾﺎﺑ ،ﺮﺑﺍﺮﺑ

col-3
col-6
col-3

ﻝﺎﺜﻣ

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</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">
  <h2>Three Unequal Columns</h2>
  <p>To create unequal columns, you have to use numbers. The following example will create a 25%/50%/25% split:</p>
  <div class="row">
    <div class="col-3 bg-success">.col-3</div>
    <div class="col-6 bg-warning">.col-6</div>
    <div class="col-3 bg-success">.col-3</div>
  </div>
</div>

</body>
</html>

ﻥﻮﺘﺳ ﮏﯾ ﺽﺮﻋ ﻢﯿﻈﻨﺗ

:ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ %25/%50/%25 ﻢﯿﺴﻘﺗ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ .ﺪﯿﻫﺩ ﻩﺯﺍﺪﻧﺍ ﺮﯿﯿﻐﺗ ﻥﺁ ﻑﺍﺮﻃﺍ ﺭﺩ ﺭﺎﮐ

col
col-6
col

ﻝﺎﺜﻣ

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">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">
  <h2>Three Unequal Columns</h2>
  <p>It is enough to only set the width of one column, and have the sibling columns automatically resize around it. The following example will create a 25%/50%/25% split:</p>
  <div class="row">
    <div class="col bg-success">.col</div>
    <div class="col-6 bg-warning">.col-6</div>
    <div class="col bg-success">.col</div>
  </div>
</div>

</body>
</html>

ﺮﺘﺸﯿﺑ ﺮﺑﺍﺮﺑ ﯼﺎﻫ ﻥﻮﺘﺳ

1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6

ﻝﺎﺜﻣ

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</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">
  <h2>More Equal Columns</h2>
  <div class="row">
    <div class="col bg-success">1 of 2</div>
    <div class="col bg-warning">2 of 2</div>
  </div>
  <br>
  <div class="row">
    <div class="col bg-success">1 of 4</div>
    <div class="col bg-warning">2 of 4</div>
    <div class="col bg-success">3 of 4</div>
    <div class="col bg-warning">4 of 4</div>
  </div>
  <br>
  <div class="row">
    <div class="col bg-success">1 of 6</div>
    <div class="col bg-warning">2 of 6</div>
    <div class="col bg-success">3 of 6</div>
    <div class="col bg-warning">4 of 6</div>
    <div class="col bg-success">5 of 6</div>
    <div class="col bg-warning">6 of 6</div>
  </div>
</div>

</body>
</html>

ﺰﻠﮐ ﻒﯾﺩﺭ

:ﺪﯿﻨﮐ ﻝﺮﺘﻨﮐ (col ﺩﺍﺪﻌﺗ ﻪﺑ ﻪﺟﻮﺗ ﻥﻭﺪﺑ) ﺪﻧﻮﺷ ﺮﻫﺎﻇ ﺮﮕﯾﺪﮑﯾ ﺭﺎﻨﮐ ﺭﺩ ﺪﯾﺎﺑ ﻪﮐ ﺍﺭ ﯽﯾﺎﻫu

1 of 2
2 of 2

1 of 4
2 of 4
3 of 4
4 of 4

1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6

ﻝﺎﺜﻣ

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</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">
  <h2>Row Cols</h2>
  <p>The .row-cols-* classes are used to set the number of columns that should appear next to each other.</p>

  <div class="row row-cols-1">
    <div class="col bg-success">1 of 2</div>
    <div class="col bg-warning">2 of 2</div>
  </div>
  <br>
  <div class="row row-cols-2">
    <div class="col bg-success">1 of 4</div>
    <div class="col bg-warning">2 of 4</div>
    <div class="col bg-success">3 of 4</div>
    <div class="col bg-warning">4 of 4</div>
  </div>
  <br>
  <div class="row row-cols-3">
    <div class="col bg-success">1 of 6</div>
    <div class="col bg-warning">2 of 6</div>
    <div class="col bg-success">3 of 6</div>
    <div class="col bg-warning">4 of 6</div>
    <div class="col bg-success">5 of 6</div>
    <div class="col bg-warning">6 of 6</div>
  </div>
</div>

</body>
</html>

ﺮﺘﺸﯿﺑ ﺮﺑﺍﺮﺑﺎﻧ ﯼﺎﻫ ﻥﻮﺘﺳ

1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
1 of 4
2 of 4
3 of 4
4 of 4

ﻝﺎﺜﻣ

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</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">
  <h2>More Unequal Columns</h2>
  <div class="row">
    <div class="col-8 bg-success">1 of 2</div>
    <div class="col-4 bg-warning">2 of 2</div>
  </div>
  <br>
  <div class="row">
    <div class="col-2 bg-success">1 of 4</div>
    <div class="col-2 bg-warning">2 of 4</div>
    <div class="col-2 bg-success">3 of 4</div>
    <div class="col-6 bg-warning">4  of 4</div>
  </div>
  <br>
  <div class="row">
    <div class="col-4 bg-success">1 of 4</div>
    <div class="col-6 bg-warning">2 of 4</div>
    <div class="col bg-success">3 of 4</div>
    <div class="col bg-warning">4  of 4</div>
  </div>
</div>

</body>
</html>

ﯼﻭﺎﺴﻣ ﺪﻗ

:ﺩﻮﺑ ﺪﻫﺍﻮﺧ ﺮﯾﺯ ﺐﯿﺗﺮﺗ ﻪﺑ ﺎﻫﻥﻮﺘﺳ ﻪﯿﻘﺑ ،(CSS ﺎﯾ ﻦﺘﻣ ﻉﺎﻔﺗﺭﺍ ﻞﯿﻟﺩ ﻪﺑ) ﺪﺷﺎﺑ ﯼﺮﮕ

Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.
col
col

ﻝﺎﺜﻣ

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">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">
  <h2>Equal Height</h2>
  <p>If one of the column is taller than the other, the rest will follow.</p>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col bg-success">Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.</div>
    <div class="col bg-warning">.col</div>
    <div class="col bg-success">.col</div>
  </div>
</div>

</body>
</html>

ﻮﺗ ﺭﺩ ﻮﺗ ﯼﺎﻫ ﻥﻮﺘﺳ

col-8
col-6
col-6
col-4

:ﺩﺮﮐ ﺩﺎﺠﯾﺍ ﺎﻫ ﻥﻮﺘﺳ ﺯﺍ ﯽﮑﯾ ﻞﺧﺍﺩ ﺭﺩ ﺮﮕﯾﺩ ﻥﻮﺘﺳ ﻭﺩ ﺎﺑ ﺍﺭ ﯽﻧﻮﺘﺳ ﻭﺩ ﯼﺪﻨﺑ ﺡﺮﻃ ﮏﯾ ﻥﺍﻮﺗ

ﻝﺎﺜﻣ

<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</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">
  <h2>Nested Columns</h2>
  <p>Add columns inside other columns:</p>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-8 bg-warning p-4">
      .col-8
      <div class="row">
        <div class="col-6 bg-light p-2">.col-6</div>
        <div class="col-6 bg-secondary p-2">.col-6</div>
      </div>
    </div>
    <div class="col-4 bg-success p-4">.col-4</div>
  </div>
</div>

</body>
</html>

ﻮﮕﺨﺳﺎﭘ ﯼﺎﻫ ﺱﻼﮐ

:ﺖﺳﺍ ﺱﻼﮐ ﺞﻨﭘ ﯼﺍﺭﺍﺩ Bootstrap 5 ﻪﮑﺒﺷ ﻢﺘﺴﯿﺳ

  • .col- (ﻞﺴﮑﯿﭘ 576 ﺯﺍ ﺮﺘﻤﮐ ﻪﺤﻔﺻ ﺽﺮﻋ - ﮏﭼﻮﮐ ﺭﺎﯿﺴ

  • .col-sm- (ﻩﺎﮕﺘﺳﺩﻞﺴﮑﯿﭘ 576 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮﺑ

  • .col-md- (ﻞﺴﮑﯿﭘ 768 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮﺑﺍﺮﺑ ﻪﺤﻔﺻ ﺽﺮ

  • .col-lg- (ﻞﺴﮑﯿﭘ 992 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮﺑﺍﺮﺑ ﻪﺤﻔﺻ ﺽﺮ

  • .col-xl- (ﻩﺎﮕﺘﺳﺩﻞﺴﮑﯿﭘ 1200 ﺯﺍ ﺮﺘﺸﯿﺑ ﺎﯾ ﺮ

  • .col-xxl- (ﻩﺎﮕﺘﺳﺩﯼﺎﻫ xxl - ﻞﺴﮑﯿﭘ 1400 ﺯﺍ

.ﺩﺮﮐ ﺐﯿﮐﺮﺗ ﺮﺗﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻭ ﺮﺗﺎﯾﻮﭘ ﯼﺪﻨﺑ ﺡﺮﻃ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﻻﺎﺑ ﯼﺎﻫ ﺱﻼﮐ

ﻪﺘﮑﻧ: ﮒﺭﺰﺑ ﺱﻼﮐ ﺮﻫﯽﻣ ﺮﺗﯽﻣ ﺮﮔﺍ ﻦﯾﺍﺮﺑﺎﻨﺑ ،ﺩﻮﺷﺽﺮﻋ

ﯽﻘﻓﺍ ﻪﺑ ﻪﺘﺷﺎﺒﻧﺍ

col-sm-9
col-sm-3
col-sm
col-sm
col-sm

:ﺩﻮﺷ ﯽﻘﻓﺍ (xl ﻭ sm، md، lg) ﺮﺗﮒﺭﺰﺑ ﯼﺎﻫﻩﺎﮕﺘﺳﺩ ﺭﺩ ﻪﮑﻨﯾﺍ ﺯﺍ ﻞﺒﻗ ،ﺩﻮﺷu20

ﻝﺎﺜﻣ

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</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>Stacked to Horizontal</h1>
  <p>Resize the browser window to see the effect.</p> 
  <p>This example demonstrates a 75%/25% split on small, medium, large and xlarge devices. On extra small devices, it will stack (100% width).</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-sm-9 bg-success">col-sm-9</div>
      <div class="col-sm-3 bg-warning">col-sm-3</div>
    </div>
  </div>
  <br>
  <p>This example demonstrates a 33% split on small, medium, large and xlarge devices. On extra small devices, it will stack (100% width).</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-sm bg-success">col-sm</div>
      <div class="col-sm bg-warning">col-sm</div>
      <div class="col-sm bg-success">col-sm</div>
    </div>
  </div>
</div>
    
</body>
</html>

ﺖﻘﺑﺎﻄﻣ ﻭ ﺐﯿﮐﺮﺗ

col-6 col-sm-9
col-6 col-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

ﻝﺎﺜﻣ

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</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>Mix and Match</h1>
  <p>Resize the browser window to see the effect.</p> 
  <p>This example demonstrates a 50%/50% split on extra small devices and 75%/25% split on larger devices.</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-6 col-sm-9 bg-success">col-6 col-sm-9</div>
      <div class="col-6 col-sm-3 bg-warning">col-6 col-sm-3</div>
    </div>
  </div>
  <br>
  <p>This example demonstrates a 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices.</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-7 col-lg-8 bg-success">col-7 col-lg-8</div>
      <div class="col-5 col-lg-4 bg-warning">col-5 col-lg-4</div>
    </div>
  </div>
  <br>
  <p>This example demonstrates a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%).</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-sm-3 col-md-6 col-lg-4 bg-success">col-sm-3 col-md-6 col-lg-4</div>
      <div class="col-sm-9 col-md-6 col-lg-8 bg-warning">col-sm-9 col-md-6 col-lg-8</div>
    </div>
  </div>
</div>

</body>
</html>

ﻥﺍﺩﻭﺎﻧ ﻥﻭﺪﺑ

.(ﺖﺳﺍ ﺽﺮﻓﺶﯿﭘ .g-4) ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ .g-0 ﺯﺍ ،ﻥﺍﺩﻭﺎﻧ ﻞﻣﺎﮐ ﻑﺬﺣ ﯼﺍﺮﺑ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

ﻝﺎﺜﻣ

<div class="row g-0">

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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>No Gutters</h1>
  <p>To change the gutters (extra space) between columns, use any of the <code class="w3-codespan">.g-1|2|3|4|5</code> classes 
  (<code class="w3-codespan">.g-4</code> is default). </p>
  <p>To remove the gutters completely, use <code class="w3-codespan">.g-0</code>:</p>

  <div class="container-fluid">
    <div class="row g-0">
      <div class="col-3 bg-success">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-9 bg-warning">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </div>
    </div>
  </div>
</div>

</body>
</html>