Bootstrap 5: Izgara Örnekleri

İçindekiler

    İçindekiler tablosunu göster

Aşağıda Bootstrap 5 ızgara düzeninin bazı örneklerini topladık.

Üç Eşit Sütun

Belirtilen sayıda öğe üzerinde .col sınıfını kullanın; Bootstrap kaç öğe olduğunu tanıyacaktır (ve eşit genişlikte sütunlar oluşturacaktır). Aşağıdaki örnekte her biri %33,33 genişliğe sahip üç sütun öğesi kullanıyoruz.

col
col
col

Örnek

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Kendiniz Deneyin →

<!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>

Sayıları Kullanan Üç Eşit Sütun

Sütun genişliğini kontrol etmek için sayıları da kullanabilirsiniz. Toplamın toplamının 12 veya daha az olduğundan emin olun (mevcut 12 sütunun tamamını kullanmanıza gerek yoktur):

col-4
col-4
col-4

Örnek

<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>

Kendiniz Deneyin →

<!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>

Üç Eşitsiz sütun

Eşit olmayan sütunlar oluşturmak için sayıları kullanmanız gerekir. Aşağıdaki örnek %25/%50/%25'lik bir bölünme yaratacaktır:

col-3
col-6
col-3

Örnek

<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>

Kendiniz Deneyin →

<!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>

Bir Sütun Genişliğini Ayarlama

Ancak yalnızca bir sütunun genişliğini ayarlamak ve kardeş sütunların bu sütun etrafında otomatik olarak yeniden boyutlandırılması yeterlidir. Aşağıdaki örnek %25/%50/%25'lik bir bölünme yaratacaktır:

col
col-6
col

Örnek

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

Kendiniz Deneyin →

<!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>

Daha Eşit Sütunlar

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

Örnek

<!-- 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>

Kendiniz Deneyin →

<!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>

Satır Sütunları

Ayrıca .row-cols-* sınıflarıyla kaç sütunun yan yana görünmesi gerektiğini de kontrol edebilirsiniz (kaç sütun olduğuna bakılmaksızın):

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

Örnek

<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>

Kendiniz Deneyin →

<!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>

Daha Eşitsiz Sütunlar

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

Örnek

<!-- 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>

Kendiniz Deneyin →

<!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>

Eşit Yükseklik

Sütunlardan biri diğerinden daha uzunsa (metin veya CSS yüksekliğinden dolayı), geri kalanı şu şekilde olacaktır:

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

Örnek

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Kendiniz Deneyin →

<!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>

İç İçe Sütunlar

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

Aşağıdaki örnek, sütunlardan birinin içinde başka iki sütun bulunan iki sütunlu bir düzenin nasıl oluşturulacağını gösterir:

Örnek

<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>

Kendiniz Deneyin →

<!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>

Duyarlı Sınıflar

Bootstrap 5 ızgara sisteminin beş sınıfı vardır:

  • .col- (ekstra küçük cihazlar - ekran genişliği 576 pikselden az)

  • .col-sm- (küçük cihazlar - ekran genişliği 576 piksele eşit veya daha büyük)

  • .col-md- (orta boy cihazlar - ekran genişliği 768 piksele eşit veya daha büyük)

  • .col-lg- (büyük cihazlar - ekran genişliği 992 piksele eşit veya daha büyük)

  • .col-xl- (xlarge cihazlar - ekran genişliği 1200 piksele eşit veya daha büyük)

  • .col-xxl- (xxl cihazlar - ekran genişliği 1400 piksele eşit veya daha büyük)

Yukarıdaki sınıflar daha dinamik ve esnek düzenler oluşturmak için birleştirilebilir.

İpucu: Her sınıfın ölçeği artar, dolayısıyla sm ve için aynı genişlikleri ayarlamak isterseniz md, yalnızca sm belirtmeniz gerekir.

Yatay Olarak Yığılmış

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

Aşağıdaki örnek, daha büyük cihazlarda (sm, md, lg ve xl) yatay hale gelmeden önce, ekstra küçük cihazlarda yığın halinde başlayan bir sütun düzeninin nasıl oluşturulacağını gösterir:

Örnek

<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><

Kendiniz Deneyin →

<!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>

Karıştır ve Eşleştir

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

Örnek

<!-- 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>

Kendiniz Deneyin →

<!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>

Oluk Yok

Sütunlar arasındaki payları (ekstra boşluk) değiştirmek için .g-1|2|3|4|5 sınıflarından herhangi birini kullanın (.g-4 varsayılandır).

Olukları tamamen kaldırmak için .g-0 komutunu kullanın:

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.

Örnek

<div class="row g-0">

Kendiniz Deneyin →

<!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>