My php page styling is done but when I added it to my existing html template ( which has header and left menu ) I noticed that template css menu is messed up.
While debugging what part of styling is causing an issue, I realized its due to bootstrap.min.css which I used while referring to w3schools BootStrap Progress Bar:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Any pointers on how to avoid this? I thought of adding a wrapping container for code but not sure how to make the change. Any suggestions?
This is a difficult issue to solve as bootstrap has a lot of default styling. The only thing I can recommend is:
Be sure that your styles come after the inclusion of the bootstrap stylesheet. This way your styles will overwrite bootstraps styles where there are conflicts.
If this does not fix the issue you will probably have to use the code inspector to find all instances that you think are incorrect and override them in your own stylesheet. This will be tedius, but if you want to use bootstrap and you have conflicts it may be your only option.
Bootstrap used to have a customizer allowing you to download only what you want, but it seems that in version 4 it is a little more complicated to do this. If you are already using version 3.3 then I would recommend downloading a customized version: https://getbootstrap.com/docs/3.3/customize/
Related
(like how override cms' css file like using classes under bootstrap instead of main.css)
..
I having a problem with my website which i made by developing only front end using HTML& CSS. (website is in .HTML).
I decided to use the website under a CMS so that it can be more secured and efficient and i chose fuelCMS1.3.1 under CI.
But i faced a problem when pasting my code into the CMS, my website itself has a css file called 'main.css'..while the fuelCMS itself uses its own 'main.css'!
when it came to pasting code of a dropdown menu from bootstrap, my website under CMS, dropdown menu is not working!
I went to inspect element to see my .HTML website, and it shows that its making FULL use of bootstrap.min.css & few main.css.
but in CMS, when checking inspect elemtn, i found that HALF of the dropdown menu css is using 'main.css' instead of boot strap!
how is possible that 'main.css' in fuel cms is being used instead of my bootstrap link?
i mean, i understand that 'main.css' in fuelCMS is having same classes as in bootstrap, so it is overriding them..how do i solve this and force fuel cms to use classes from my bootstrap link ONLY?
im also facing the same problem with 'body', becuase when i check the inspect element for the 'body' in css, in my HTML website its only used once, But when i check inspect element is FuelCMS, its being surprisingly being used more frequently.
body tag is used in several css files
(as if fuel cms has its own css identification and classes for 'body' instead of making use of my own 'body' tag for local HTML files..same goes for the main.css, fuelcms is identifying my site css tags using its own css files rather than my ones (its overriding them)..not to mention missing classes from my own css files being ignored)
its like my css are clashing with css of the cms, where the cms is overriding my ones.
hope i was able to explain well.
im quite new with front end developing, so I'm still managing and learning trying to track the problem and solve it.
Any suggestions? Thanks in advance.
The main.css is placed under assets folder.
Just remove the main.css and use yours instead.
Or you can use custom.css to override the main.css.
Just include the custom.css in your layout.
I have site created already which is not bootstrap, and now i need to implement the bootstrapValidator for the validation purpose, if i include bootstrap css then my site style also changing,
Is there any way to include bootstrap form styles alone in html, apart from cut copy in bootstrap css file?
You can use the Bootstrap Customizer
and check only the "form" checkbox to download only the part you need...
Use customize css download from bootstrap site, here you see the options of customizations. You can choose what you want in your CSS. Or you can use less css, download the bootstrap less master from github and compile theme as per your project needs.
The only way to do this is to find a stylesheet that someone else took the time to copy / paste from the Bootstrap. I've done this on several occasions, and its pretty simple as all the form-styling elements are placed next to each other in the bootstrap stylesheet.
So, find you scissors :)
You can't import a part of a css file, so you can copy/paste your desires classes on your actual css or rename your classes in your css file to not have conflicts with bootstrap's classes name and then your site's style will not change when you include bootstrap.
Our agency has been contracted to develop a few pages within an existing CMS. I would like to use the Twitter Bootstrap framework to scaffold these pages. However, I am worried about conflicts with the existing CSS on the site for the templated areas that we are not modifying.
Rather than bring in Bootstrap styles for the entire document on those pages and manually troubleshoot all style conflicts, I am wondering if it is a better solution to compile Boostrap CSS with a selector prefix (#body-content for example) to isolate those styles to the region of the document we are modifying.
Are there any risks to this approach? Any reason why this approach might not work or should be avoided?
As per your questions
Are there any risks to this approach?Any reason why this approach might not work or should be avoided?
See, the only issue you will have is when you get an update to the bootstrap framework, because you use your own custom compiled css, you will have to recompile it for the new version.
If you stick to the original css, you simply replace the current css with the new version.
and everything falls into place.
About conflicts, i would suggest that you make changes to a custom css file that overides the boostrap.css, so that you get the chance to check what is actually conflicting.
<link rel="stylesheet" type="text/css" href="boostrap.css">
<link rel="stylesheet" type="text/css" href="custom.css">
I recently found out about twitter bootstrap and I have been diving deep into the most recent version, Bootstrap 3. On the website, there is an example for an "Off Canvas" template (here: http://getbootstrap.com/examples/offcanvas/ ) which I have been modifying. But there are several things in the example that do not make sense to me.
In the "Off Canvas" template example, there are div elements that reference classes such as "row-offcanvas", "row-offcanvas-right", and "sidebar-offcanvas". I cannot find these in the bootstrap.css, and neither do I see these in the Chrome DevTools. I also do not see any effect when I remove these classes. Do these classes have any purpose? Or was it a mistake in the example to include those seemingly non-existent classes?
As #mgttlinger mentioned the css is defined at offcanvas.css See http://getbootstrap.com/examples/offcanvas/offcanvas.css
If want to a walk through of how it works see http://www.kendoui.com/blogs/teamblog/posts/13-11-05/creating-a-rwd-off-canvas-layout-with-bootstrap-3.aspx. It uses http://getbootstrap.com/examples/offcanvas/ as the starting point and explains the css used to create off canvas.
http://bradfrost.github.io/this-is-responsive/patterns.html#off-canvas is an excellent resource for more background on off canvas and most other responsive design patterns.
If you look at the page source closely you will find that in the header there is
<!-- Custom styles for this template -->
<link href="offcanvas.css" rel="stylesheet">
These classes are defined in there. And at least for me it does make a clearly visible difference if I remove this.
i did experience the same dunno what i did wrong but js didnt seems to work i just remove all codes and link back all js and css not working. So i try other js on my other folders it work and copy them on my empty offcanvas page it works. Then put back all templates code and it works fine now i guess its my machine some components stop responding maybe just try restart.
I'm currently utilizing the Twitter Bootstrap framework to create a personal website.
I've found, however, that the site looks better with slight tweaks to some of the CSS classes; does it matter (not in terms of functionality, but convention) whether I make these changes within the provided bootstrap.css file or should I move them to a separate file containing solely my changes?
Actually, it is not recommended to change any framework! For your case, if you need to make a modification it is recommended to run your CSS file right after bootstrap's. As a result, the browsers render the default CSS of bootstrap and then your modifications without any conflict.
For example,
<-- include your bootstrap file -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<-- Your modifications -->
<link href="yourcssfile.css" rel="stylesheet">
hope this helps.
From maintenance point of view, you should put your custom tweaks in a separated CSS file, so (for example) if you'll upgrade/downgrade your Bootstrap version your changes will still be in-tact.
You should also consider, that when dealing with CSS Frameworks, usually you'll have the dev/debug version and the production/minified version. if you change the library code you'll have to take care of all the formats as well (unless you're performing the minification/bundling yourself).