Search code examples
cssreactjsbootstrap-4reactstrap

Reactstrap documentation


I've never used bootstrap or reactstrap and i'm having a hard time understand the documentation.

For exemple i'm trying to change Navbar color and background opacity but since they have reserved keywords to pass as props i don't know where to find them or how does it work! the only thing that worked with Color was color = " white". I tried to change it using css but it doesn't work i even tried to use the !important but nothing too. Here's their documentation:

documentation Navbar

They are using Bootsrap 4


Solution

  • The color attribute you mention here comes from bootstrap conventions. They try to limit the use of some attributes using enums. For instance, the color attribute accepts values such as "primary", "secondary", "warning", "danger" etc.

    See here for more details: https://reactstrap.github.io/components/alerts/

    I suspect "white" didn't actually work, but rather appeared so. "white" is not in the enum list as far as I know.

    The way to customize colors is to change what the "primary", "success", etc colors are. This helps us to theme a website rather than using random colors all over the website. Using themes help us a lot during the latter part of the website journey.