Bootstrap Jumbotron

Hazırlayan: Onurcan KAYA

Bootstrap Jumbotron Nedir?

Bootstrap Jumbotron daha fazla belirgin hale getirmek için büyük gri veya mavi kutu içinde göstermek için kullanılmaktadır. Bootstrap Jumbotron özelliğini eklemek için Jumbotron sınıfı kullanılmaktadır. Jumbotron sınıfı kullanıldığında kutu içine eklenen içeriğin boyutları da büyük olarak görüntülenir. 

NOT: Bootstrap 3 ile tanıtılan Jumbotron, Bootstrap 5 ile desteklenmesi sona ermiştir. Ancak <div> etiketi içerisine özel yardımcı sınıflar eklenerek aynı etkiyi alabilmekteyiz.

Bootstrap Jumbotron Nasıl ve Ne İçin Kullanılır? 

Jumbotron sayfanızda kolay ve hızlı bir şekilde istediğiniz bir alana dikkat çekmenize yardımcı olur.

Aşağıda sağda bir Jumbotron kod örneği ve sol tarafta ise bu Jumbotron kod örneğinin çıktısı yer almaktadır. 

<div> etiketi içerisinde oluşturduğumuz "class" ile "container" kodunu kullanarak alttaki kodlarda gerçekleştirilecek tüm işlemleri bir konteyner içerisine toplamış oluyoruz. "container" kodunun yanında bulunan "mt" (margin-top) kodu ile içeriğin dışarısından boşluk bırakmamız sağlanır. İkinci <div> etiketimizin "class" içerisindeki kodlarda ise "p" (padding) ile içeriğin etrafında boşluk oluşturmamıza, "bg" (background/arkaplan) ile kutucuğun rengini belirlememize, "text" ile metnin rengini belirlememize ve "rounded" ile de kutucuğun köşelerinde ufak derecede yuvarlak olmasına olanak sağlar.

Değer Verme İşlemi Nasıl Gerçekleştirilir?

Yukarıdaki kodlarda "mt-3" ve "p-5" kodlarının kullanıldığını görmekteyiz. Peki bu kodların yanındaki rakamlar ne işe yarar? Bu rakamlar 1'den 5'e kadar değer alabilmekte ve sınırlıda olsa kodlarımıza değer verip düzenlememize olanak sağlar.

Kısaltmalar

Jumbotron kodlarının içerisinde bulunan kısaltmaların açıklaması ise şunlardır;

m = margin

mt = margin-top

p = padding

bg = background