Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Use Bootstrap variables in your custom CSS */ .my-hero { background-color: var(--bs-primary); color: var(--bs-white); font-family: var(--bs-font-sans-serif); border-radius: var(--bs-border-radius-lg); } .custom-badge { background-color: var(--bs-success); color: white; padding: 0.25rem 0.5rem; border-radius: var(--bs-border-radius-pill); } /* This automatically adapts to dark mode */ .my-card { background-color: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }
Result
Open