Customize Bootstrap 5.3 with CSS variables #39551

manuelmeurer · 2024-01-02T10:29:11Z

manuelmeurer
Jan 2, 2024

I'm starting a new project with Bootstrap 5.3 and I'm trying to do some basic customizations with CSS variables but I'm unsure what the best approach is...

Basically I'm loading the CSS from a CDN, and as a first step I'd like to customize the primary color that is used everywhere.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://ga.jspm.io/npm:[email protected]/dist/css/bootstrap.min.css" />
    <style>
      :root,
      [data-bs-theme=light] {
        --bs-primary: yellow;
      }
    </style>
  </head>

  <body>
    <a class="btn btn-primary" href="#">Link</a>
  </body>
</html>

This has no effect, though, the button is still displayed in the default primary blue.

What is the correct way to override the primary color with CSS variables?

Answered by julien-deramond

Jan 2, 2024

Hey @manuelmeurer

So right now, tweaking the --bs-primary CSS variable to give all components a new color isn't possible. You can see --bs-primary primarily as a read-only CSS variable reusable in your website to get the primary color. For a consistent global look and setting a new primary color, diving into Sass is the way to go.

However, as explained in the article, depending on the needs, it's possible to override the rendering of the components one by one by overriding their CSS variables.

Some improvements will be made when Bootstrap is refactored in v6 for an easier theming approach. The groundwork with CSS variables and color modes in v5.2/3 was the opening act, and we committed to…

View full answer

manuelmeurer · 2024-01-02T10:42:28Z

manuelmeurer
Jan 2, 2024
Author

Ok I found this article that says I need to change --bs-btn-bg on .btn-primary.

Is that correct?
Does that mean there is no simple "one line" fix to change the primary color (or other basic values that are used in a lot of other places) with CSS variables?

Do I need to go back to using Sass, so I can set $primary?
I was really hoping I could use the compiled CSS from a CDN and do a few simply customizations with CSS vars... 😄

0 replies

julien-deramond · 2024-01-02T16:28:11Z

julien-deramond
Jan 2, 2024
Maintainer

Hey @manuelmeurer

So right now, tweaking the --bs-primary CSS variable to give all components a new color isn't possible. You can see --bs-primary primarily as a read-only CSS variable reusable in your website to get the primary color. For a consistent global look and setting a new primary color, diving into Sass is the way to go.

However, as explained in the article, depending on the needs, it's possible to override the rendering of the components one by one by overriding their CSS variables.

Some improvements will be made when Bootstrap is refactored in v6 for an easier theming approach. The groundwork with CSS variables and color modes in v5.2/3 was the opening act, and we committed to keeping things smooth without any regressions.

0 replies

manuelmeurer · 2024-01-02T20:05:36Z

manuelmeurer
Jan 2, 2024
Author

Thanks for the explanation, @julien-deramond!

I'll stick with Sass for now and look forward to v6! :)

0 replies

cgslivre · 2024-09-10T15:00:57Z

cgslivre
Sep 10, 2024

https://bootstrap.build

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Customize Bootstrap 5.3 with CSS variables #39551

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Bootstrap

Customize Bootstrap 5.3 with CSS variables #39551

manuelmeurer Jan 2, 2024

Replies: 4 comments

manuelmeurer Jan 2, 2024 Author

julien-deramond Jan 2, 2024 Maintainer

manuelmeurer Jan 2, 2024 Author

cgslivre Sep 10, 2024

manuelmeurer
Jan 2, 2024

manuelmeurer
Jan 2, 2024
Author

julien-deramond
Jan 2, 2024
Maintainer

manuelmeurer
Jan 2, 2024
Author

cgslivre
Sep 10, 2024