Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

nicholas maddren
nicholas maddren
12,793 Points

Modifying Bootstrap CSS problem

I have started my project by changing CSS directly in the Bootstrap CSS which seems to be causing me some real problems. I am aware I shouldn't have done this however I am too far into the project to start over. So here is the problem, I have a navbar for large devices and a navbar for small devices. I have used media queries to hide each one of the navs on certain sized viewports. The problem I am now having is that the navbar I am trying to make has the same CSS tags as the other navbar due to the fact that Bootstrap uses the same CSS classes over again. How could I stop this from happening or is there no way?

Thanks

Eric Tan
Eric Tan
5,340 Points

please include an example of the code or problem. thanks!

2 Answers

jdh
jdh
12,334 Points

Include some code or a link to the project as Im pretty unsure of whats going on.

If you're going to try to override some portions of Bootstrap, I would suggest that you start a new style sheet and place it under the bootstrap sheet. Then, put !important beside any class that you are trying to re-write over Bootstraps default.

Joe Gage
Joe Gage
1,206 Points

have you tried using a different class for the element you are trying to modify? If you have the navbar in a DIV, you can try adding a unique class name and then styling according to the class you assigned to it...don't forget the !important declaration can be used to override a cascading style.