טוען...

מעבר למצב חשוך

מעבר למצב בהיר

מעבר מימין לשמאל

מעבר משאל לימין

הגדרות

Badge
Badge
עותק
<span class="badge bg-primary">Primary</span><span class="badge bg-secondary">Secondary</span><span class="badge bg-success">Success</span><span class="badge bg-danger">Danger</span><span class="badge bg-warning text-dark">Warning</span><span class="badge bg-info">Info</span><span class="badge bg-light text-dark">Light</span><span class="badge bg-dark">Dark</span>
PrimarySecondarySuccessDangerWarningInfoLightDark
Pill badge
עותק
<span class="badge rounded-pill bg-primary">Primary</span><span class="badge rounded-pill bg-secondary">Secondary</span><span class="badge rounded-pill bg-success">Success</span><span class="badge rounded-pill bg-danger">Danger</span><span class="badge rounded-pill bg-warning text-dark">Warning</span><span class="badge rounded-pill bg-info">Info</span><span class="badge rounded-pill bg-light text-dark">Light</span><span class="badge rounded-pill bg-dark">Dark</span>
PrimarySecondarySuccessDangerWarningInfoLightDark
Avater badge
עותק
<!-- Badge Avater Lg --><a class="me-2 badge-avater badge-avater-lg" href="#"><img class="img-circle" src="img/bg-img/user1.png" alt=""><span class="status bg-success"></span></a><!-- Badge Avater --><a class="me-2 badge-avater" href="#"><img class="img-circle" src="img/bg-img/user2.png" alt=""><span class="status bg-success"></span></a><!-- Badge Avater Sm --><a class="me-2 badge-avater badge-avater-sm" href="#"><img class="img-circle" src="img/bg-img/user3.png" alt=""><span class="status bg-success"></span></a><!-- Badge Avater Lg --><a class="me-2 badge-avater badge-avater-lg bg-primary" href="#">A<span class="status bg-success"></span></a><!-- Badge Avater --><a class="me-2 badge-avater bg-primary" href="#">B<span class="status bg-success"></span></a><!-- Badge Avater Sm --><a class="me-2 badge-avater badge-avater-sm bg-primary" href="#">C<span class="status bg-success"></span></a><!-- Badge Avater Group lg --><div class="badge-avater-group"><a class="badge-avater badge-avater-lg" href="#"><img class="img-circle" src="img/bg-img/user1.png" alt=""></a><a class="badge-avater badge-avater-lg" href="#"><img class="img-circle" src="img/bg-img/user2.png" alt=""></a><a class="badge-avater badge-avater-lg" href="#"><img class="img-circle" src="img/bg-img/user3.png" alt=""></a><a class="badge-avater badge-avater-lg" href="#"><img class="img-circle" src="img/bg-img/user4.png" alt=""></a><a class="badge-avater badge-avater-lg bg-primary" href="#">+3</a></div><!-- Badge Avater Group --><div class="badge-avater-group"><a class="badge-avater" href="#"><img class="img-circle" src="img/bg-img/user1.png" alt=""></a><a class="badge-avater" href="#"><img class="img-circle" src="img/bg-img/user2.png" alt=""></a><a class="badge-avater" href="#"><img class="img-circle" src="img/bg-img/user3.png" alt=""></a><a class="badge-avater" href="#"><img class="img-circle" src="img/bg-img/user4.png" alt=""></a><a class="badge-avater bg-primary" href="#">+3</a></div><!-- Badge Avater Group Sm --><div class="badge-avater-group"><a class="badge-avater badge-avater-sm" href="#"><img class="img-circle" src="img/bg-img/user1.png" alt=""></a><a class="badge-avater badge-avater-sm" href="#"><img class="img-circle" src="img/bg-img/user2.png" alt=""></a><a class="badge-avater badge-avater-sm" href="#"><img class="img-circle" src="img/bg-img/user3.png" alt=""></a><a class="badge-avater badge-avater-sm" href="#"><img class="img-circle" src="img/bg-img/user4.png" alt=""></a><a class="badge-avater badge-avater-sm bg-primary" href="#">+3</a></div>
A B C
+3
+3
+3
Badge with button
עותק
<a class="btn btn-primary" href="#">Notification <span class="ms-1 badge bg-success">1</span></a><a class="btn btn-warning" href="#">Cart<span class="ms-1 badge rounded-pill bg-dark">9</span></a><a class="btn btn-danger" href="#">Profile<span class="ms-1 badge rounded-pill bg-primary">3</span></a><a class="btn btn-info" href="#">Sales<span class="ms-1 badge rounded-pill bg-primary">1280</span></a><a class="btn btn-dark" href="#">Revenue<span class="ms-1 badge bg-primary">$63</span></a>
Badge with heading
עותק
<h4>Hello Affan!<span class="badge bg-primary ml-2">badge</span></h4><h5>Hello Affan!<span class="badge bg-primary ml-2">badge</span></h5><h6>Hello Affan!<span class="badge bg-primary ml-2">badge</span></h6>

Hello Affan!badge

Hello Affan!badge
Hello Affan!badge