0

I am working on a react project. I am using react-bootstrap. But, you know you have limit on bootstrap. For example I am using a navbar but I would like to change navbar's colour. But you have I think 6-7 option about it. Or, I would like to change my navbar's dimensions. These are just examples, you can think same things about every components that react-bootstrap have. How can I manage bootstrap's css? Or should I use my own css? Or should I use another frameworks for different things?

I can change my whole project and write with material-ui but same things will happen. Please let me know your idea.

  • Does this answer your question? [Customizing Bootstrap CSS template](https://stackoverflow.com/questions/8596794/customizing-bootstrap-css-template) – George Ponta Dec 03 '19 at 14:22

2 Answers2

0

I have small experience with React, but in other frameworks (VUE, Angular) i am modifying bootstrap variables by importing bootstrap.scss. After that just change required scss variables with your own and it should work.

Andris
  • 3,895
  • 2
  • 24
  • 27
  • Thank you. Let me know what is scss? I will explore what is it but if you have any doc or example about it. It would be great for me –  Dec 03 '19 at 14:04
  • scss is stylesheet templating language. In css you just write plain css code, but in scss you write css with variables. But it also need to be compiled. For that you can use gulp. There is plenty examples in google. Depends also on your framework. In latest Angular for example scss to css generation is done by Angular itself. Maybe there is something similar with React. – Andris Dec 03 '19 at 14:06
  • Also you can just override everything needed just with stronger css rules. Depends how you want to do it. – Andris Dec 03 '19 at 14:09
  • Oh, Thx. I just searched and react also support sass. I will work on it. Do you have any tutorial or guide? –  Dec 03 '19 at 14:21
  • Nope. But google should help. This is very common usage. – Andris Dec 03 '19 at 14:25
  • Thx. This is very rare advise. –  Dec 03 '19 at 14:37
0

You can either change the bootstrap file described in this stackoverflow issue.

Or

You can also just change your css locally if you require small specific changes. Best way is to have them in a separate .css file and add !important at the end of each style to make sure they apply.

Example :

p {
   color: red !important;
}
George Ponta
  • 193
  • 1
  • 15
  • It is suggested to use !important rules as few as possible. – Andris Dec 03 '19 at 14:40
  • Also you can just change 1 variable in scss file, which generates multiple css rulles correctly without need to override them. – Andris Dec 03 '19 at 14:42