Apply CSS stylesheet to only one Div
I have a navigation bar that I created with bootable CSS. I would like to add it to my site, which already has a CSS stylesheet, and when I attach both stylesheets, it conflicts and messes up all my styles. Is there a way that I can easily add a CSS stylesheet and apply it to only one specific div?
For example, is there a way that I could only load CSS on this id?
Bootstrap CSS is extremely large, so I hope there is a way that doesn't require adding #myid in front of each of the hundreds of CSS rules.
Edit . It looks like this is being interpreted in the wrong direction. The question is not how can I get the CSS navbar, because that would still mess up the other style.
Is there a way to place #mydiv around all the CSS rules in the bootstrap stylesheet (e.g. #mydiv {#header {CSS rule} #content {CSS rule}} so that this rule only applies to one div, or do something similar to this effect? I know this example won't work, but is there something that can be done similar to this effect to solve my problem?
source to share
This is one way to do it:
-
You can get the relevant css from the GetBootstrap.com setup Page
-
Add id = "mynav" to the parent of the nav, if present, or wrap the nav in a div with id = "mynav"
-
Open up loaded bootstrap.css, remove unnecessary css (maybe normalize if it's a repetition of what you have).
-
Find all navigation related styles and put #mynavbar (space) .navbar
-
Then you open up your own CSS and place #mynav in front of the styles.
-
Since nav and all Bootstrap deal with border size, you will need to change your math in YOUR css.
HTML is just an example:
<div id="mynav"><header class="navbar navbar-static-top">
...
</header></div>
CSS example, there is a lot of that, so you need to add #mynav in front of all
#mynavbar .navbar {styles}
You can get the navbar and associated css and js from the GetBootstrap.com setup page:
http://getbootstrap.com/customize/
Switch as follows:
Scroll down and make other settings as you need in colors, etc. in Navbar:
Then scroll down the page and click download.
The download will contain the CSS of your choice. Then you open the loaded bootstrap.css file, you will see the css and other base settings normalized and the navbar with no other styles. If there are conflicting classes, rename them and apply them to the html.
You didn't specify which conflicts, but usually it's the .container class being the same, or the global - and required - box-sizing: border-box that Bootstrap uses. If you see a mess, go back to your own CSS - not Bootstrap, and tweak the math (include all borders and padding). Read the box size: border-box to find out more.
source to share