Bootstrap / Badge Kullanımı

Badge Kullanımı

Örnek

<!DOCTYPE html>
<html>
    <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
</head>
<body>

<div class="container mt-5">
    
    <button class="btn position-relative" type="button">
        <i class="fa-solid fa-heart fa-3x text-danger"></i>
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning">+10</span>
    </button>
    
    <span class="badge text-bg-success p-3 rounded-pill ml-4">Lütfen Dikkat</span>
</div>


</body>
</html>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

718 Okunma 02/04/2026.06:47:09 02/04/2026.11:08:09

/ Yorumunuzu Ekleyin

İsminiz

Email Adresiniz

Avatar

jpg, gif, png türündeki resimleri seçmelisiniz

Yorumuzu Yazınız

Bootstrap Takvim Seçtiricisi (Datetime Picker)

30,687 okuma, 30.11.2014 02:43

Bootstrap CSS Componentleri

Bootstrap ile kullanılan CSS destekli HTML Componentlerden bazıları..

26,269 okuma, 20.10.2024 23:15

Bootstrap Form Elemanları

Bootstrapın temel form mantığı ve bir kaç örnek...

25,163 okuma, 07.03.2025 15:22

Bootstrap Grid Sistemi

Bildiğiniz gibi Bootstrap ile responsive tasarımlar yapmak çok basit ve hızlı. İstediğimiz her öğe için birer yapılmış ve kopyala yapıştır yaparak hızlıca sitemizi Bootstrap ile şekillendirebiliriz.

23,630 okuma, 12.03.2026 11:29

Bootstrap Class Referansı

Bootstrap v4.3.0 Class Listesi

17,832 okuma, 17.04.2019 02:52

Bootstrap 3 JavaScript Componentleri

Bootstrap ile kullanılan Javascript destekli Componentlerden bazıları... Makalenin bazı bölümleri ingilizcedir.

14,979 okuma, 20.02.2017 23:06

Bootstrap 4 Navbar Menü Örnekleri

Normal bootstrap 4 navabarı ile fare üzerine gelince açılan, yatayda tüm ekranı kaplayan ve zemininde siyah gölgesi olan menü örnek kodları.

10,141 okuma, 04.06.2020 14:44

Bootstrap 4 Class Referansı

8,032 okuma, 01.03.2019 04:40

Bootstrap 4 Yardımcı Kısa Kodlar

6,825 okuma, 04.06.2020 15:14

Bootstrap 4 ile Ekranı 4 Eşit Parçaya Nasıl Bölebilirsiniz?

Örnekteki uygulama ile Ekranı 4 eşit parçaya bölebilirsiniz.

6,547 okuma, 26.01.2020 17:43

Bootstrap 4 ile Ekranı 4 Eşit Parçaya Nasıl Bölebilirsiniz?

Bootstrap Kart (Card) Kullanımı

5,891 okuma, 02.04.2026 16:43

Bootstrap Tablo Örnekleri

5,157 okuma, 26.03.2026 13:23

Button Kullanımı

5,118 okuma, 02.04.2026 09:43

Kenarlık Sınıfı

4,741 okuma, 26.03.2026 16:02

Uyarı (Alert) Mesajı Sınıf

Alert sınıfı ile primary, success, info, warning, danger, secondary, dark, light arka plan renkle<br />rine sahip, dikkat çekici mesaj kutuları oluşturulabilir (Görsel 4.42). En temel kullanım şekli aşa<br />ğıdaki örnek kodlarda görülmektedir.

4,414 okuma, 28.02.2025 12:34