Bootstrap 5.2 / Utilities

Schaduwen

Voeg met box-shadow-utilities schaduwen toe aan elementen of verwijder ze.

Voorbeelden

Hoewel schaduwen op componenten in Bootstrap standaard uitstaan en via $enable-shadows kunnen worden ingeschakeld, kun je met onze box-shadow-utility-klassen ook snel een schaduw toevoegen of verwijderen. Bevat ondersteuning voor .shadow-none en drie standaardformaten (met bijbehorende variabelen).

HTML

<div class="shadow-none p-3 mb-5 bg-light rounded">Geen schaduw</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Kleine schaduw</div>
<div class="shadow p-3 mb-5 bg-body rounded">Gewone schaduw</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Grotere schaduw</div>

Sass

Variabelen

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

Utilities-API

Shadow-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.