1

There have been some questions regarding this topic before but I am a bit lost and I would appreciate someone to explain this to me in a different way.

Context: I am using twitter bootstrap in my rails app (without Less, not familiar with Less or what it is but that's a separate issue)

I have been teaching myself CSS and when looking at the application.html.erb file in my rails app it calls certain classes such as "nav-bar" and "container-fluid nav-collapse". I am trying to find the css file where these classes are defined (so that i can customize them) but I cannot find it. So far I have tried the bootstrap_and_overrides.css and application.css.scss files but couldnt find the navbar class. Also I have tried these links: Bootstrap CSS Editing Editing navbar text color in twitter bootstrap but I wasnt able to have any luck.

Community
  • 1
  • 1
jfalkson
  • 3,471
  • 4
  • 20
  • 25

1 Answers1

6

You should never directly edit bootstrap css files.

For whatever you need to update as you mentioned use bootstrap_and_overrides.css or your custom.css file for overriding original classes and divs.

The best way to find where the classes are in css file is if you are using firefox, click:

Inspect Element and on the right side you will see the name of .css file where this class is saved. enter image description here

enter image description here

But when you have class name you can just override this class with your rules. Don't forget to include your custom.css file though.

If you still have troubles finding where particular classes are hiding you can use firebug to track what files are loaded like this: enter image description here

For each file you have the source where you can see the path and find the elements.

Community
  • 1
  • 1
sensei
  • 7,044
  • 10
  • 57
  • 125