1355

Komple Uygulamalı Web Geliştirme Eğitimi

Bootstrap Badges

Bootstrap badges nedir ve nasıl kullanılır?

Bootstrap badges, ekstra bilgilendirme mesajlarına ilgi çekmek için kullanılır. Örneğin bir başlığın yanında vereceğimiz bir mesaj için.

Boostrap badge içinde bulunduğu parent elamana uygulanan font büyüklüğüne göre ölçeklenebilir.

Badge olarak eklemek istediğimiz içeriğe .badge sınıfını eklemeliyiz.

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Örnek 1 için tıklayınız.

.badge-* sınıfı ile badge' e istediğimiz bir arka zemin renginide kazandırabiliriz. Örneğin .badge-secondary ile gri bir arka zemin rengi.

Kullanabileceğimiz diğer .badge-* sınıfları ise; .badge-primary, .badge-secondary.badge-success, .badge-danger.badge-warning.badge-info.badge-light.badge-dark sınıflarıdır.

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Örnek 2 için tıklayınız.