Bootstrap 5 బెల్ట్

బేజ్

బేజ్ (బేజ్) అంశాలకు అదనపు సమాచారాన్ని జోడించడానికి ఉపయోగించబడుతుంది:

లో <span> అంశంలో ఉపయోగించండి .badge క్లాస్ మరియు కంటెక్స్ క్లాస్ (ఉదా .bg-secondaryచతురస్రాకార బేజ్ సృష్టించడానికి ఉపయోగించండి. పరిపాలక అంశం పరిమాణానికి బేజ్ సున్నితంగా పెంచివుంటుంది (ఉన్నట్లయితే):

ఉదాహరణ

<h1>ఉదా హెడింగ్ <span class="badge bg-secondary">కొత్త</span></h1>
<h2>ఉదా హెడింగ్ <span class="badge bg-secondary">కొత్త</span></h2>
<h3>ఉదా హెడింగ్ <span class="badge bg-secondary">కొత్త</span></h3>
<h4>ఉదా హెడింగ్ <span class="badge bg-secondary">కొత్త</span></h4>
<h5>ఉదా హెడింగ్ <span class="badge bg-secondary">కొత్త</span></h5>
<h6>ఉదా హెడింగ్ <span class="badge bg-secondary">కొత్త</span></h6>

స్వయంగా ప్రయత్నించండి

కంటెక్స్ బేజ్

ఏదైనా కంటెక్స్ క్లాస్ ను ఉపయోగించండి (.bg-*) బేజ్ రంగును మార్చడానికి ఉపయోగించండి:

ఉదాహరణ

<span class="badge bg-primary">ప్రధాన విధము</span>
<span class="badge bg-secondary">ప్రాధమిక విధము</span>
<span class="badge bg-success">విజయం</span>
<span class="badge bg-danger">ప్రమాదం</span>
<span class="badge bg-warning">హెచ్చరిక</span>
<span class="badge bg-info">సమాచారం</span>
<span class="badge bg-light">తెలుపు</span>
<span class="badge bg-dark">కాలినేట్</span>

స్వయంగా ప్రయత్నించండి

కప్స్యూల్ బేజ్జు

ఉపయోగం .rounded-pill బేజ్జులను పొడవైనదిగా చేసే క్లాస్:

ఉదాహరణ

<span class="badge rounded-pill bg-primary">ప్రధానం</span>
<span class="badge rounded-pill bg-secondary">ప్రాధమికం</span>
<span class="badge rounded-pill bg-success">విజయం</span>
<span class="badge rounded-pill bg-danger">ప్రమాదం</span>
<span class="badge rounded-pill bg-warning">హెచ్చరిక</span>
<span class="badge rounded-pill bg-info">సమాచారం</span>
<span class="badge rounded-pill bg-light">తెలుపు</span>
<span class="badge rounded-pill bg-dark">కాలినేట్</span>

స్వయంగా ప్రయత్నించండి

అంశంలో బేజ్జు

బటన్లో బేజ్జులు ఉపయోగించడానికి ఉదాహరణ:

ఉదాహరణ

<button type="button" class="btn btn-primary">
  సందేశం <span class="badge bg-danger">4</span>
</button>

స్వయంగా ప్రయత్నించండి