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.
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.
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/
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{
}
Related
My limited CSS knowledge is starting to catch up with me now and I'm not sure how to handle this particular situation, despite grappling over it in various forms for months.
So I was having this problem awhile back with my solid-color Bootstrap navbar where it didn't fully extend to the right side of the browser by a handful of pixels. I could never figure out why but I did figure out a while back that overriding .row with a margin-right attribute of 0, fixed this problem. Fast forward a few weeks, I just noticed that my grey content boxes are now off-centered, as in, the margins between the left side and content and the right side and content were not the same, clearly because of this change I had previously made.
Now I can offset this problem by overriding .row with a margin-left attribute of 0 (and then messing with padding in comparison to those values to get the desired effect) but I'm really just not sure if this is bad practice or not? As .row is one of the most used classes of all in Bootstrap, I feel like I'm hacking away when there must be a elegant solution (where one problem I can't figure out is how to apply the margin-right styling to certain outer rows and not in certain rows - which would be a nightmare to try and figure out where at this stage of my project). I did try for a little while to apply this margin-right: 0 attribute just to the specific rows I thought were the culprit for the navbar issue but in the end, I wasn't able to figure it out.
Any help is appreciated, thanks!
you should not change the css properties of a Bootstrap class, for many reasons: above all
you could create regression somewhere else in your site (as already happened to you)
you can't be sure what will happen to your site if you upgrade the bootstrap css to a new release
You should
add a specific ID or a specific custom class to the originary navbar that had that issue
then create a custom css file (that you will import in you web pages after importing all bootstrap css files)
add in this new custom css file a rule to the previous new ID/class for the navbar that fix the original problem
It sounds like you might be nesting a container within a container, or a similar nesting issue. I cannot tell without a code sample.
You shouldn't need to use a row on your navbar, bootstrap has its own classes for a navbar.
See http://www.w3schools.com/bootstrap/bootstrap_navbar.asp for some snippets on how to do this.
Also you should never edit the bootstrap file, create an override file and put any changes you make into there. Make sure you link to the override file after the bootstrap file so that it cascades correctly. Like so:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-override.css">
I have provided a template and it contains many CSS files in head and the body is divided into header ,content and footer portions. I want to add to add bootstrap in order to utilize its grid system for its content part. But when ever I add bootstrap.css in head above or below all the style sheets in <head> content part and footer part renders well but my header portion of the body encounter certain design problems as many of the properties in other css files get overridden by its grid system.
All I want to know is, is there any hack I may be able to use the
bootstrap.css for the content part?
I have also tried linking the bootstrap file in <body> below the <header> and above the content portion(I know its not a good practice.) . but it also causes the similar problems for the header portion.
What you can do is make and download a custom bootstrap version from http://getbootstrap.com/customize/ that contains only the grid system and use that CSS in your web app.
No, you can't. You're going to either have to change your markup and adjust the styles accordingly, or use an ID wrapper and change the styles in your CSS to only target <header> under that specific ID.
You're better off adjusting your styles to fit bootstrap, though.
Try adding !important to the properties that you want to customize in your CSS file.
But the best way I see to solve your issue is modifying the bootstrap.css file adding your configurations and adding !important if necessary
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?
This is one way of doing it:
You can get the appropriate css from GetBootstrap.com's customize
page
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"
Open up the bootstrap.css you downloaded, remove any unnecessary css (perhaps normalize if it's a repeat of what you have).
Find all navbar related styles, and put a #mynavbar (space) .navbar
You will then open up your own CSS and put the #mynav in front of the styles affected.
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.
You can also use the less css for developing your theme. download less master from github
And use less compiler such as winLess for windows, simpLess, and Koala (supports windows, mac and linux) compiling your less files.
I'm working on integrating the Gridiculous grid with the Genesis Framework. Genesis already has some nice responsiveness built in, but I'd like to be able to quickly adjust my layout and get the nice fluidity that Gridiculous offers.
To do that, I'd like to be able to add custom classes to the major layout elements such as content, and sidebar. So, I'd like to be able to add a CSS class of .c3, .c8 etc to specific HTML elements. I need to be able to take
<div class="primary-sidebar">
and make it so that it's
<div class="primary-sidebar c3">
Am I barking up the wrong tree here? What path would be best to take to add specific classes like this to different elements? Body classes and post classes won't really work for this.
If I understand your question, I think you're definitely on the right track. You will have to write those multiple classes, of course, on your own so that the applied properties can take place. I would say start with whatever the Gridiculous supplies you in the CSS, and then add any additional styling in your own stylesheet.
In short, you would have to include the primary-sidebar c3 class in some stylesheet, but you can just copy the primary-sidebar properties given, and add your own customization to them. Hope that helps!
I am using Yii-bootstrap extension and I am having some styling problem because bootstrap css files affect the main content of the page.
My main content is a map done with OpenLayers so I am having several problems with styles mixing between them. I have tried to do a css file more general, as I have seen they recomend on the web,for applying different styles but as they are two "automatic" libraries is a hard work to try to guess how they work and the classes they use.
Is there any way to disable a css file for a concrete div?
you can create a class for that div and reset the values you have changed for general divs.
Nothing that I'm aware of, no.
The only way I can see is..
<div class="outer">
<div class="inner" >
Inner Content
</div>
</div>
You could do something like..
.outer{
}
.outer .inner{
/* override the specific styles you need here */
}