Bootstrap 4 Kentekens


Voorbeeld opskrif Nuut

Voorbeeld opskrif Nuut

Voorbeeld opskrif Nuut

Voorbeeld opskrif Nuut

Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut

Kentekens word gebruik om bykomende inligting by enige inhoud te voeg. Gebruik die .badgeklas saam met 'n kontekstuele klas (soos .badge-secondary) binne <span> elemente om reghoekige kentekens te skep. Let daarop dat kentekens skaal om by die grootte van die ouerelement te pas (indien enige):

Voorbeeld

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Kontekstuele Kentekens

Primêr Sekondêr Sukses Gevaar Waarskuwing Inligting Lig Donker

Gebruik enige van die kontekstuele klasse ( .badge-*) om die kleur van 'n kenteken te verander:

Voorbeeld

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>


Pil Kentekens

Primêr Sekondêr Sukses Gevaar Waarskuwing Inligting Lig Donker

Gebruik die .badge-pillklas om die kentekens meer rond te maak:

Voorbeeld

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Kenteken binne 'n element

'n Voorbeeld van die gebruik van 'n kenteken binne 'n knoppie:

Voorbeeld

<button type="button" class="btn btn-primary">
  Messages <span class="badge badge-light">4</span>
</button>