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.
For an example of the css styles have a look at: http://getbootstrap.com/examples/theme/
If you want to see how the example looks without the bootstrap-theme.css file open up your browser developer tools and delete the link from the <head> of the example and then you can compare it.
I know this is an old question but posted it just in case anyone is looking for an example of how it looks like I was.
Update
bootstrap.css
= main css framework (grids, basic styles, etc)
bootstrap-theme.css
= extended styling (3D buttons, gradients etc). This file is optional and does not effect the functionality of bootstrap at all, it only enhances the appearance.
Update 2
With the release of v3.2.0 Bootstrap have added an option to view the theme css on the doc pages. If you go to one of the doc pages (css, components, javascript) you should see a "Preview theme" link at the bottom of the side nav which you can use to turn the theme css on and off.
First, bootstrap-theme.css
is nothing else but equivalent of Bootstrap 2.x style in Bootstrap 3. If you really want to use it, just add it ALONG with bootstrap.css
(minified version will work too).
Bootstrap-theme.css is the additional CSS file, which is optional for you to use. It gives 3D effects on the buttons and some other elements.