I have taken over a project for someone. Thee former developer started using using Bootstrap to create a new menu. The problem is that bootstrap and at least one other CSS file in the project have classes with the same name. Because of this, bootstrap is causing the existing layout to not display properly. What are ways to deal with this type of situation? Bootstrap really just needs to be use with the web page header and nothing else. CSS is not one of my strong skill sets.
Add a comment
|
3 Answers
The problem is that bootstrap and at least one other CSS file in the project have classes with the same name.//
This is the right time to find those clashing classes and give custom names to the external css files. It is always recommended that we don't change the bootstrap classes by modifying the bootstrap css or give our classes the same name assigned by bootstrap. Not doing so might make your life harder as your project expands. So better safe than sorry.
1 Comment
crjunk
The problem is that this is a fully deployed and working website with quite a few css files. To go back and rename existing clashing classes would be a very big undertaking and is a luxury that I do not have due to time constraints. Under different circumstances, your recommendation is the path that I would prefer to take.
You said that it's the header that relies on Bootstrap and nothing else, if that is the case and your Bootstrap verion is 3.0 and up, you can get just the navbar and related css from the GetBootstrap.com customizer
After you toggle on what you need, scroll down and remove other additions (just unclick or toggle them all off) then go down and download just the CSS you need for the menu the other developer used. If it's the .container class that's conflicting, you can re-name it in the compiled CSS that you just downloaded and then use that re-named class in your html.
You didn't mention what conflicted, ususally it's the .container class but also elements may be messed up by the global box-sizing:border box that Bootstrap uses. To fix that, don't remove it, it's best to use that and just re-set your elements to the correct widths and don't worry about padding or border. Read about it here: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
2 Comments
crjunk
I will have to look into this. Didn't realize that this option exist. Some of the other items used are col-md-3, col-md-4, etc.. I may have to redo this portion anyway. Due to the current layout, it is not optimized to dynamically change based on the browser. This is causing certain elements in the navigation to wrap and cause the rest of the top nav to be unusable. Because this is such a large and complex site, is it best to start out using bootstrap rather that begin using it after the fact?
Christina
It's best to start with the framework, and that's what Bootstrap is. You can also keep the grid in the customizer.
You can try to change your CSS file to have more specific rules, for example;
<div class="header">
<div class="items">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
Set the CSS rule to
.header .items .block{
}
Instead of just
.block{
}
