Bootstrap + react-bootstrap form elements, styling not applied

I’m using bootstrap + react-bootstrap, and I don’t really understand why my custom theming isn’t applied on form elements.

The theming is correctly applied to my button that has btn-primary style, and I assumed it would be the same on other bootstrap elements?

Here you can see that the elements still have the default bootstrap style vs the button:

My index.scss (app base generated with create-react app):

$theme-colors: (
  primary: #86CB92,
  secondary: #404E7C,
  success: #71B48D,
  info: #251F47,
  warning: #251F47,
  danger: #E87461,
  light: #D8B4E2,
  dark: #260F26
@import "~bootstrap/scss/bootstrap";


<Form.Check type={'switch'}
    onChange={({ target }) => {
      lightArray[idx].state.on = target.checked;
      turnLightOnOrOff(idx + 1, target.checked);

Is there something I am missing? Do I have to add classes to the form elements? I have looked around but can’t find anything

Source: CSS – Stack Overflow

November 20, 2021
Category : News
Tags: css | javascript | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.