Bootstrap / Badge Kullanımı

2. Sınıf Öğrencileri İçin Sunular 1
5. Sınıf Öğrencileri Için Sunular 13
8. Sınıf Öğrencileri İçin Sunular 23
Belirli Gün Ve Haftalar 1
Bilgisayar Donanımları 5
Bilgisayar Programlama 2
Bilgisayar Yazılım 2
Bilişim Teknolojileri Ve Yazılım Temel Bilgisayar 64
Biyografiler 2
Biyoloji 2
Değerler Eğitimi 4
Eba Elektronik Bilişim Ağı 5
Eğitim-Öğretim Sunuları 3
Felsefe 2
İslam 3
Kelime İşlemci 1
Kişisel Gelişim 4
Kodlama, Robotic 4
Ortak Eğitim Proje Sunuları. 2
Problem Çözme Ve Algoritmalar 3
Proje Nedir? Nasıl Yapılır? 1
Rehberlik 16
Sağlık 3
Savaşlar 1
Scratch 1
Seminerler 3
Sınav Kaygısı 2
Sosyal Bilgiler 1
Sosyal Bilgiler 1
Tarih 1
Ulaşım Araçları 1
Verimli Ders Çalışma 1
Web Araçları 0
Windows İşletim Sistemi 1
Yarışmalar 0

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>

53 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,467 okuma, 30.11.2014 02:43

Bootstrap CSS Componentleri

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

26,018 okuma, 20.10.2024 23:15

Bootstrap Form Elemanları

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

24,914 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,396 okuma, 12.03.2026 11:29

Bootstrap Class Referansı

Bootstrap v4.3.0 Class Listesi

17,586 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,839 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ı.

9,880 okuma, 04.06.2020 14:44

Bootstrap 4 Class Referansı

7,810 okuma, 01.03.2019 04:40

Bootstrap 4 Yardımcı Kısa Kodlar

6,671 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,414 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,407 okuma, 02.04.2026 16:43

Bootstrap Tablo Örnekleri

4,865 okuma, 26.03.2026 13:23

Button Kullanımı

4,584 okuma, 02.04.2026 09:43

Kenarlık Sınıfı

4,439 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,240 okuma, 28.02.2025 12:34