Apply CSS Stylesheet to only one Div

Question

I have a navbar that I made using the bootstrap CSS. I would like to add it to my website which already has its CSS Stylesheet and when I attach both stylesheets, it conflicts and messes up all my styling. Is there a way I can easily add a CSS Stylesheet and have it only apply to one particular div?

For example, is there a way I could only load the CSS on that id?

Bootstrap CSS is extremely large so I'm hoping there is a way that does not require having to add #myid before each of the hundreds of CSS rules.

Edit It appears this is being interpreted in the wrong direction. The question is not how can I just get the navbar CSS, because that still messes up other styling.

Is there a way I can put a #mydiv around all CSS rules in a bootstrap stylesheet (for example #mydiv { #header {CSS rule} #content {CSS rule} } so that the rule is only applied to one div or do something similar to that effect? I know that example wouldn't work, but is there something that can be done similar to that effect to solve my problem?

Answer 1

This is one way of doing it:

1. You can get the appropriate css from GetBootstrap.com's customize page

2. Add the id="mynav" to the parent of the navbar if there is one or wrap the navigation in a div with the id="mynav"

3. Open up the bootstrap.css you downloaded, remove any unnecessary css (perhaps normalize if it's a repeat of what you have).

4. Find all navbar related styles, and put a #mynavbar (space) .navbar

5. You will then open up your own CSS and put the #mynav in front of the styles affected.

6. Since the navigation and all of Bootstrap works with border-box sizing, you'll have to change your math in YOUR css.

HTML - Example only:

    <div id="mynav"><header class="navbar navbar-static-top">
    ...
    </header></div>

CSS example, there's lots of this so you have to add the #mynav before all

    #mynavbar .navbar {styles}

---

You can get the navbar and related css and js from GetBootstrap.com's customize page:

http://getbootstrap.com/customize/

Toggle as follows:

Scroll down and make other adjustments as you need to the colors and such to the Navbar:

Then scroll down again and click the download.

The download will contain the CSS of what you selected. Then you would open up the bootstrap.css file you got, you'll see the normalize css and other base settings and the navbar, without other styles. If there are conflicting classes, rename them and apply them to your html.

You didn't mention what conflicts but usually it's the .container class being the same or the global -- and necessary -- box-sizing:border-box that Bootstrap uses. If you see mess ups, go back into your own CSS -- not Bootstrap's, and adjust the math (include all borders and padding). Read up on box-sizing:border-box to learn more.