1

My previous (similar) question has been closed as a duplicate with the following notice:

This question already has answers here: Customizing Bootstrap CSS template (9 answers) Your post has been associated with a similar question. If this question doesn’t resolve your question, ask a new one.

And since no, this question doesn't resolve my question, here I am asking a new one. Specifically, unanswered issues are:

  • Most answers in the linked question are about earlier versions of Bootstrap. My question is about Bootstrap 5, as mentioned in the title.
  • The answer in the linked question that is referring version 5 is only explaining SASS, but I'm looking for a solution with CSS, as mentioned in the title.
  • I posted a minimal example but there is no minimal example solution in the linked question.

I have this minimal example of a Bootstrap 5 page below. As you can see, by default it uses black text color, white background color, and kinda blue to highlight certain items. How can I change this default color scheme with CSS? I assume I can just insert a custom <style> tag? Or maybe just include another CSS via <link> from somewhere?

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>

<body>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

Snippet put together from the examples at https://getbootstrap.com/docs/5.1/getting-started/introduction/, https://getbootstrap.com/docs/5.1/forms/checks-radios/ and https://getbootstrap.com/docs/5.1/components/accordion/.

finefoot
  • 9,914
  • 7
  • 59
  • 102
  • There are multiple questions, both of which are answered by the dup... *"How can I change this default color scheme with CSS? I assume I can just insert a custom – Carol Skelly Sep 16 '21 at 16:33
  • 1
    That's exactly my point: I have no idea where to even start. What I have is what you see above: a minimal example which loads Bootstrap CSS and JS from the CDN and I can't find any resource _how_ or _where_ to add my customizing CSS ` – finefoot Sep 16 '21 at 16:38
  • The dup explains *where* to put the overrides **"adding CSS rules that follow after the bootstrap.css"** .. so the – Carol Skelly Sep 16 '21 at 16:54
  • But what if I just want to change the color scheme? Is that not how Bootstrap is built? Maybe that's the main point of my misunderstanding. I thought Bootstrap defines colors like "color A is this certain blue color" and the primary button color is color A. So I don't even want to touch the primary button CSS, I just want to change color A from blue to red - for the whole theme. Is that not how it works? – finefoot Sep 16 '21 at 17:14
  • That's how it works in SASS which is used to generate the bootstrap.css. But you can't simply "change color A from blue to red" using CSS .. it would take 100's of CSS rules to override all the Bootstrap selectors. Did you [read this answer](https://stackoverflow.com/questions/28261287/how-to-change-btn-color-in-bootstrap/50973207#50973207)? – Carol Skelly Sep 16 '21 at 17:23
  • Yes, I did read the answer. I'm still working on it. It's gonna take some time I'm afraid. Also read this one: https://stackoverflow.com/a/50253707 Yes, seems like SASS is what I need. I'll have to look into it. – finefoot Sep 16 '21 at 17:53

1 Answers1

2

Short answer: You can't easily change the entire color scheme using CSS. Use SASS to change the color scheme

However, you can override specific Bootstrap style using CSS overrides.

The concept is the same regardless of Bootstrap version. As explained in the duplicate..

"you can override the Bootstrap CSS by adding CSS rules that follow after the bootstrap.css and use the correct CSS specificity"...

For example..

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <style>
  /* override bootstrap styles */
  body {
     background-color: pink;
  } 
  </style>
  <title>Hello, world!</title>
</head>

Or put the overrides in a separate CSS file and reference that file,

"One way to customize is simply using CSS to override Bootstrap CSS. For maintainability, CSS customizations are put in a separate custom.css file, so that the bootstrap.css remains unmodified. The reference to the custom.css follows after the bootstrap.css for the overrides to work..."

Finally,

"When making customizations, you should understand CSS Specificity. Overrides in the custom.css need to use selectors that are the same specificity as (or more specific) the bootstrap.css"

Codeply

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Hey :) Thanks for the reply. Yes, I understand that the concept is the same. But that's like a very basic understanding. This concept applies to almost everything in web development and doesn't really help with Bootstrap specifically. Like, how do I find out what to write into my CSS? How do I know all the class names and specifiers? Or can I just write "instead of blue, use red" etc? When I'm reading the Bootstrap docs, everything is using SASS. Maybe I'm totally misunderstanding something, but I'm really lost at the moment. I think I could use something like the minimal example from above – finefoot Sep 16 '21 at 16:33
  • I don't know how to answer such a broad question. [Does this help](https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles)? You can always use the browser inspect tools (F12) to see what CSS selectors are applied to given element. [see here](https://stackoverflow.com/questions/20896018/editing-bootstrap-css-classes) or [here](https://stackoverflow.com/questions/50407286/css-see-what-styling-bootstrap-has-applied-to-element) Again, it's just a matter of using the appropriate CSS selectors and rules. There are many Bootstrap dupes and examples of this on SO. – Carol Skelly Sep 16 '21 at 16:44
  • Is there maybe some third-party code (JS, SASS, CSS, whatever) that I can just import using a ` – finefoot Sep 16 '21 at 17:55
  • Yes, use https://themestr.app to generate the CSS – Carol Skelly Sep 16 '21 at 18:13
  • Thank you very much for your explanations. So just so I get this right: Either I use Sass (which I have never heard of before, but I looked into it now) to compile a new CSS and provide that to my static page, or I use https://themestr.app/ to create the CSS. But in both cases I would have to provide an additional file (unlike in my example where everything is loaded from a CDN) or paste the contents into the HTML file which would bloat it. There is no other way to change the color scheme - did I get that right? (Using selectors seems like too much work and I'm bound to overlook some anyway.) – finefoot Sep 17 '21 at 01:42
  • By the way, looking at https://github.com/twbs/bootstrap/discussions/34020 and https://github.com/twbs/bootstrap/issues/26596 it seems like CSS variables might soon become read-write, so it will be much easier to change a few colors. Did I get that right, too? – finefoot Sep 17 '21 at 12:51