Hazırlayan: Onurcan KAYA
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.
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 class="container mt-3">
<h2>Jumbotron Örneği</h2>
<div class="mt-4 p-5 bg-primary text-white rounded ">
<h1>Jumbotron Başlığı</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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..</p>
</div>
</div>
<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.
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.
Jumbotron kodlarının içerisinde bulunan kısaltmaların açıklaması ise şunlardır;
m = margin
mt = margin-top
p = padding
bg = background