What are CSS variables in Bootstrap 5?
<p id="p1" class="mb-0">Text</p>
Live preview
const root = getComputedStyle(document.documentElement);
console.log('--bs-primary = ' + root.getPropertyValue('--bs-primary').trim());
console.log('--bs-body-font-size = ' + root.getPropertyValue('--bs-body-font-size').trim());
console.log('--bs-border-radius = ' + root.getPropertyValue('--bs-border-radius').trim());
Console output (real Chrome)
–bs-primary = #0d6efd
–bs-body-font-size = 1rem
–bs-border-radius = 0.375rem
The variables are defined in :root (and per component, like --bs-btn-bg). You can change them in your CSS or in JavaScript. See Bootstrap Customization.
Learn more about the similar topics:
| Tutorials |
|---|
| No Content Found. |
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |