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>

ਸਵੈ ਮੰਗਣ ਦੋਸਤ