I am new to bootstrap, I am just testing it out. Lets say I place CSS code in bootstrap.css it doesnt seem to place it in bootstrap.min.css
Am I missing something!?
They are 2 different files that why. Bootstrap.min.css is just a minified version of Bootstrap.css. This means all the whitespace and other extra characters have been removed, this is normally done to improve loading times. https://developers.google.com/speed/docs/insights/MinifyResources
If you want to add your own styles, just make a new .css file and include it in your project then add all your custom styles in there. You don't need to edit bootstrap.css or bootstrap.min.css.
Related
I got a Bootstrap template that was built by a company and I am doing a bunch of coding and additions to it but I am new to Bootstrap and I am having a problem. I added the vendor.css and theme.css files to my php header and I added the bootstrap.css file as well. My problem is when I try and use some of the bootstrap classes they dont work because of the vendor and theme css files being used. Some of them work but the appearance and functions are different. Is there any way around this so I can still use some of the bootstrap classes. I put the css files in the header in this order. theme, vendor, bootstrap and then my own css file at the bottom. Is the only way to do this by adding my own css file and make the changes. Any advice would be great. Thanks
As far as I understand from your question that, some of your bootstrap classes are working and some of the them are not working.
In that case, I think it is bootstrap version issue. Obviously updated version class will not work in older version class.
I always use a predefined CSS Reset as well as WordPress Core CSS along with my upcoming CSS in any project that I work on. I did not have a problem before I use LESS.
When I write new LESS code and compiled it through SimpLESS or any other compiler, I just get my existing CSS (Reset, WP Core) code removed from my stylesheet (.css) and it gets updated with the new compiled CSS.
It's really annoying for me as I'm using LESS for the first time.
So, how to I keep my existing CSS and the compiled CSS both at once?
Two options:
Put your existing CSS in your LESS code. Your LESS code will
overwrite your css file on every save, so you'll manage all of your
styles with LESS.
Change the name of your LESS file so you're not overwriting your
existing CSS code, then put links to both stylesheets in your HTML
document, or by putting this line in your LESS file:
#import (css) "foo.css";
why dont you compile your less to a separate style sheet and include both in your page head? The problem is if you are compiling from style.less to style.css without including your existing css code in your less, it will overwrite the file not append to it.
So either use the solution above and include your existing css in your less, or compile to a different file name and include both css files in your document head.
after I save my changes in the less file, my original css file will also be updated.
The problem here: I use #import "bootstrap" in my less file for some mixins and the entire external bootstrap lines will be copied in my normal css.
How can I just use the mixins without that "Web Essentials 2013 for Update 2" copies the entire source code to my css file ?
You can import only the parts of Bootstrap that you need. This is a really good practice to get into, since as you have seen Bootstrap will include a lot of CSS that you probably don't need. For example, depending on your project's directory structure:
#import "bootstrap/mixins.less";
There have been some questions regarding this topic before but I am a bit lost and I would appreciate someone to explain this to me in a different way.
Context: I am using twitter bootstrap in my rails app (without Less, not familiar with Less or what it is but that's a separate issue)
I have been teaching myself CSS and when looking at the application.html.erb file in my rails app it calls certain classes such as "nav-bar" and "container-fluid nav-collapse". I am trying to find the css file where these classes are defined (so that i can customize them) but I cannot find it. So far I have tried the bootstrap_and_overrides.css and application.css.scss files but couldnt find the navbar class. Also I have tried these links: Bootstrap CSS Editing
Editing navbar text color in twitter bootstrap but I wasnt able to have any luck.
You should never directly edit bootstrap css files.
For whatever you need to update as you mentioned use bootstrap_and_overrides.css or your custom.css file for overriding original classes and divs.
The best way to find where the classes are in css file is if you are using firefox, click:
Inspect Element and on the right side you will see the name of .css file where this class is saved.
But when you have class name you can just override this class with your rules. Don't forget to include your custom.css file though.
If you still have troubles finding where particular classes are hiding you can use firebug to track what files are loaded like this:
For each file you have the source where you can see the path and find the elements.
When I want to change for example the style of a bootstrap button how should I do that:
Remove the css class in the bootstrap file and create a class in my css file with my settings
Leave the original css file and create a class in my css file with !important to overwrite the original file settings.
There are surely other ways...
What is the best my also considering upgrading to new bootstrap.css file?
The best way is to:
Leave the bootstrap file untouched
Modify the class in your own stylesheet
Load your own stylesheet after the bootstrap CSS
You have the benefit of not having to use !important and you can still update bootstrap.
Note: although you can update the bootstrap-file, you still have to test your page to see whether the update broke something, but this will at least assure you that you didn't lose any work
1.) Make a backup of the file and just edit the file as you please. I wouldn't create multiple files with !important since you'll lose track of things pretty fast.