Bootstrap Konteyner

Bootstrap konteynerlar site içeriğini göstermek ve elemanları barındırmak için kullanılır. Bootstrap konteynerlar satırları ve grid (ızgaraları) barındırmak için kullanılmaktadır.

Bootstrap konteyner iki farklı şekilde kullanılmaktadır. Bunlar :

container : Duyarlı sabit genişlikte bir konteyner eklemek için kullanılır.
container-fluid : Sayfayı tam olarak kaplayacak konteyner eklemek için kullanılır.

Bootstrap Konteynerler Niçin Kullanılır?

Bootstrap container sayfa içindeki elemanları kaplamak yani içinde barındırması için kullanılır. Bootstrap konteynerlar satırları ve gridleri barındırmak için kullanılmaktadır.

Bootstrap Container Kullanımı

<div class="container">

  <h1>AZKOD BOOTSTRAP DERSLERİ</h1>
  
</div>

Bootstrap Container-fluid Kullanımı

Bootstrap container-fluid class'ı sayfayı tamamen yani %100 kaplamak için kullanılmaktadır. Sayfa boyutu ne kadar değişirse değişsin sayfanın tamamını kaplar.

<div class="container-fluid">

  <h1>AZKOD BOOTSTRAP DERSLERİ</h1>
  
</div>

Bootstrap Konteynerlere Renk Verme

Konteynerlere bootstrap içinde aşağıdaki belirli class'lardan renk verebilirsiniz. Bu renkler :

bg-primary
bg-success
bg-info
bg-warning
bg-danger
bg-secondary
bg-dark
bg-light

Bootstrap Konteynerlere Nasıl Renk Verilir?

Bootstrap konteynerlere class'ımızın yanına bir boşluk bırakarak yukarıdaki renklerden herhangi biri eklenerek renk verebilirsiniz.

Kullanımı:

<div class="container bg-primary">

<h1> Azkod ile Konteyner Renk Belirleme </h1>

</div>

Önceki Ders: Bootstrap Nedir?

Sonraki Ders: Bootstrap Izgara