Bootstrap 5.2 / Utilities

Achtergrond

Breng betekenis over via `background-color` en voeg decoratie toe met gradiënten.

Achtergrondkleur

Net als bij de contextuele tekstkleurklassen kun je de achtergrond van een element op elke contextuele klasse zetten. Achtergrond-utilities stellen color niet in, dus in sommige gevallen wil je .text-*-kleur-utilities gebruiken.

HTML

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>

<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>

<div class="p-3 mb-2 bg-success text-white">.bg-success</div>

<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>

<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>

<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>

<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>

<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>


<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Achtergrondgradiënt

Door een .bg-gradient-klasse toe te voegen wordt er een lineaire gradiënt als achtergrondafbeelding aan de achtergronden toegevoegd. Deze gradiënt begint met een halftransparant wit dat naar onderen toe vervaagt.

Heb je een gradiënt nodig in je eigen CSS? Voeg dan gewoon background-image: var(--bs-gradient); toe.

.bg-.bg-gradient

Dekking

Nieuw in v5.1.0

Sinds v5.1.0 worden background-color-utilities met Sass gegenereerd via CSS-variabelen. Dat maakt kleurwijzigingen in realtime mogelijk zonder compilatie, plus dynamische aanpassingen van de alfatransparantie.

Hoe het werkt

Neem onze standaard .bg-success-utility.

CSS

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

We gebruiken een RGB-versie van onze CSS-variabele --bs-success (met de waarde 25, 135, 84) en koppelen daar een tweede CSS-variabele aan, --bs-bg-opacity, voor de alfatransparantie (met standaardwaarde 1 dankzij een lokale CSS-variabele). Dat betekent dat wanneer je nu .bg-success gebruikt, je berekende color-waarde rgba(25, 135, 84, 1) is. De lokale CSS-variabele binnen elke .bg-*-klasse voorkomt overervingsproblemen, zodat geneste instanties van de utilities niet automatisch een aangepaste alfatransparantie krijgen.

Voorbeeld

Om die dekking te wijzigen, overschrijf je --bs-bg-opacity via eigen stijlen of inline stijlen.

HTML

<div class="bg-success p-2 text-white">Dit is de standaard success-achtergrond</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">Dit is een success-achtergrond met 50% dekking</div>

Of kies een van de .bg-opacity-utilities:

HTML

<div class="bg-success p-2 text-white">Dit is de standaard success-achtergrond</div>
<div class="bg-success p-2 text-white bg-opacity-75">Dit is een success-achtergrond met 75% dekking</div>
<div class="bg-success p-2 text-dark bg-opacity-50">Dit is een success-achtergrond met 50% dekking</div>
<div class="bg-success p-2 text-dark bg-opacity-25">Dit is een success-achtergrond met 25% dekking</div>
<div class="bg-success p-2 text-dark bg-opacity-10">Dit is een success-achtergrond met 10% dekking</div>

Sass

Lees naast de volgende Sass-functionaliteit ook over onze meegeleverde CSS custom properties (oftewel CSS-variabelen) voor kleuren en meer.

Variabelen

De meeste background-color-utilities worden gegenereerd door onze themakleuren, die opnieuw worden toegekend vanuit onze generieke kleurpaletvariabelen.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Ook grijstinten zijn beschikbaar, maar slechts een deel daarvan wordt gebruikt om utilities te genereren.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Map

Themakleuren worden vervolgens in een Sass-map gezet, zodat we eroverheen kunnen loopen om onze utilities, componentmodifiers en meer te genereren.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Grijstinten zijn ook als Sass-map beschikbaar. Deze map wordt niet gebruikt om utilities te genereren.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

RGB-kleuren worden gegenereerd uit een aparte Sass-map:

Standaardwaarden: zie scss/_maps.scss in de Bootstrap-broncode.

En achtergrondkleurdekkingen bouwen daarop voort met hun eigen map die door de utilities-API wordt gebruikt:

Standaardwaarden: zie scss/_maps.scss in de Bootstrap-broncode.

Mixins

Er worden geen mixins gebruikt om onze achtergrond-utilities te genereren, maar we hebben wel een paar extra mixins voor andere situaties waarin je je eigen gradiënten wilt maken.

Standaardwaarden: zie scss/mixins/_gradients.scss in de Bootstrap-broncode.

Utilities-API

Achtergrond-utilities worden gedeclareerd in onze utilities-API in scss/_utilities.scss. Leer hoe je de utilities-API gebruikt.

Standaardwaarden: zie scss/_utilities.scss in de Bootstrap-broncode.