Differencebetween Bootstrap.CSS and Bootstrap-Theme.Css

What is the difference between bootstrap.css and bootstrap-theme.css?

bootstrap.css is the core css for BootStrap that defines all the style for various controls/components, where as bootstrap-theme.css defines the themes (gradient/animation) for buttons,dropdown menu,navbar,progressbar,panels.

Most of the times adding bootstrap.css is enough for bootstrap to work, but for gradient/animation, you can use bootstrap-theme.css.

You can see the difference on https://getbootstrap.com/docs/3.4/css/#buttons and then click on "Preview theme" from the very bottom of the menu on the right-hand side of the page.

Is the bootstrap-theme.css file the same for any Bootswatch theme?

bootstrap-theme.css is a very old add-on theme specific to Bootstrap 3.x. It's no longer relevant, not used for any Bootswatch themes and should be removed from the project.

Difference between bootstrap.css and web.css file?

What is Bootstrap

I think you're trying to refer to the Twitter Bootstrap that is used all around the Internet. It contains most of the Styling techniques for the Elements, such as buttons, inputs etc.

When you edit a website's Stylesheet, (Bootstrap.css is a Style sheet and its name doesn't make it write/edit protected file) you get the style that you've applied to it.

http://getbootstrap.com/

Web.css

This file might be the default Style sheet that was created by the Developers at Microsoft while creating the Template for the Website that you're using.

Secondly, when you edit and create this file, it is also a Style Sheet which means it would apply the style to your website and all the web pages who are refering to it.

You're right. It has all the pre-defined methods and contains all of the contents and styles required to make a web page responsive. For more: https://en.wikipedia.org/wiki/Responsive_web_design

What might have caused this problem would be cache. When you first loaded the web page, it would have captured the New Style sheet from the file System and would have applied the styles. But second time it would have loaded the File from the Cache.

https://en.wikipedia.org/wiki/Cache_(computing)

This way, the browser would load the last successive layout of the Web Page. Without loading a new StyleSheet from the File System.

I really think, you need to reload the page using CTRL + F5 button. This would be helpfull in this manner! Because Bootstrap.css is editable and you can edit it. It doesn't prevent editing, only caching would be the problem here.

How to use bootstrap-theme.css with bootstrap 3?

Upon downloading Bootstrap 3.x, you'll get bootstrap.css and bootstrap-theme.css (not to mention the minified versions of these files that are also present).

bootstrap.css

bootstrap.css is completely styled and ready to use, if such is your desire. It is perhaps a bit plain but it is ready and it is there.

You do not need to use bootstrap-theme.css if you don't want to and things will be just fine.

bootstrap-theme.css

bootstrap-theme.css is just what the name of the file is trying to suggest: it is a theme for bootstrap that is creatively considered 'THE bootstrap theme'. The name of the file confuses things just a bit since the base bootstrap.css already has styling applied and I, for one, would consider those styles to be the default. But that conclusion is apparently incorrect in light of things said in the Bootstrap documentation's examples section in regard to this bootstrap-theme.css file:

"Load the optional Bootstrap theme for a visually enhanced experience."

The above quote is found here http://getbootstrap.com/getting-started/#examples on a thumbnail that links to this example page http://getbootstrap.com/examples/theme/. The idea is that bootstrap-theme.css is THE bootstrap theme AND it's optional.

Themes at BootSwatch.com

About the themes at BootSwatch.com: These themes are not implemented like bootstrap-theme.css. The BootSwatch themes are modified versions of the original bootstrap.css. So, you should definitely NOT use a theme from BootSwatch AND the bootstrap-theme.css file at the same time.

Custom Theme

About Your Own Custom Theme: You might choose to modify bootstrap-theme.css when creating your own theme. Doing so may make it easier to make styling changes without accidentally breaking any of that built-in Bootstrap goodness.

more about bootstrap-theme.css in bootstrap 3?

To use Bootstrap, you do not need to include the bootstrap.theme.css file. This file is intended to bring back some of the styles from the previous major version (2.3.2) of Bootstrap (gradients, box-shadows, etc.)

Here is an example of the styles provided by the theme file.
http://getbootstrap.com/examples/theme/

Including the theme file = Non-flat Bootstrap v2.3.2 look and feel (kind-of)
Not including the theme file = new flatter v3.0+ look and feel.

Why does Bootstrap include a bootstrap-theme file?

I started a bug on this and got this response:

We're not separating the docs into another repo because it makes it much more painful/difficult to keep them up-to-date with changes to the code.

Pretty pathetic IMO but it's not my project to manage. After an hour of asking I went with combining the first two options. I added the following to the very last line of bootstrap.less:

@import "theme.less";

To make that work in reality, there are a couple of alterations required:

Clean up the Gruntfile to stop building the separate theme
Removing Bootstrap imports from the top of the theme.less file (causes a loop if you don't)

But the output is as desired. One fat bootstrap.css file and a slightly slimmer bootstrap.min.css file.

I still don't feel like hacking the whole build process is a very sustainable method of using Bootstrap as a starter theme. Very open to better solutions.

In another project I have dumped the final import and I'm just doing all my work in bootstrap.less. Sure, there are 50 lines at the top that are a load of boilerplate imports but it means I'm not hopping between files nearly as much. I know what's being included all the time.

I also removed grunt and went with my own fabric solution that was already used in my existing workflow. As ever, your mileage may vary. You're not me.

Confusion regarding the relationship between a bootstrap theme and a framework like Angular 2?

Bootstrap uses jQuery and it's clear and obvious that jQuery and
Angular are two different frameworks written above JavaScript. So in my personal opinion I think we shouldn't mix up two different frameworks on a single project project (either use jQuery or use Angular).

But in your case as you are doing with Angular so you can use Bootstrap's CSS only for layout and styling and instead of using Bootstrap's default components written on jQuery (like modal, dropdown etc.) there are Bootstrap components available that are re-written using Angular without the dependency of jQuery. You can check ng-bootstrap and ngx-bootstrap which have almost all Bootstrap components written completely with Angular.

Alternatively, there is another complete UI framework for Angular based on Google's Material Design specs named Angular Material. Currently Angular Material for Angular 2 is in beta.

Also there are bundle of official UI resources that you can use and drive smoothly with Angular.