1

how can I edit bootsrap style like body background color?

I dont want to do this all the time:

body { background: #539754 !important; }

I want to set font color in navbar but i cannot do that. I am preety confused about where the styles are coming from

.navbar-default .navbar-nav > li > a {
 color: #000;
 font-size: 20px;
 font-family: cursive;
 }
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
 color: #333;
 background-color: transparent;
 }

I did this inside bootstrap.css but Nothing happened. when pressing F12 edit it there in file /dist/css/bootstrap.css - I dont even have that folder. I understand its created dynamickly but how can I edit it?

dtechlearn
  • 363
  • 2
  • 4
  • 21
  • You better not edit bootstrap css but write your own css and apply the rules you would like – Ulug Toprak Apr 12 '17 at 21:37
  • So the common practise is to take that style I need and overwrite it? with !important? or create totaly new style class/identifier – dtechlearn Apr 12 '17 at 21:40
  • 1
    You should generally only use !important as a last resort, and even then its probably not a last resort and you shouldn't use it. Like the other person said. You can add a class selector to your html element and then apply your styles ontop that way. You can write your css more specific to overwrite Bootstraps ect. ect. – camccar Apr 12 '17 at 21:47
  • 1
    You don't need to overwrite using `!important`. You just need to introduce a higher level of "[CSS Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)" in order to get your styles to apply after the Bootstrap styles. – jeffjenx Apr 12 '17 at 21:51

2 Answers2

5

To override bootstrap styles you create your own stylesheet such as styles.css and be sure to load it after your bootstrap css file. When defining the classes just match or exceed bootstraps tree. Example: If bootstrap is defining:

.navbar-default .navbar-nav > li > a {
     color: #000;
     font-size: 20px;
     font-family: cursive;
 }

and all you want to do is change color you add this to your new stylesheet.

.navbar-default .navbar-nav > li > a {
     color: #CC0000;
 }
Adrianopolis
  • 1,272
  • 1
  • 11
  • 15
1

Add a class to your <li> tag like

class="diff-color"

Then add rules to your css file

.diff-color{
    color:blue;
}
Ulug Toprak
  • 1,172
  • 1
  • 10
  • 21