174

After downloading a complete pack of bootstrap 3 from http://getbootstrap.com, I noticed that there is a separate css file for theme. How to make use of it? Please explain?

I included bootstrap-theme.css in my existing bootstrap project, but there is no difference in output.

Peeyush Kushwaha
  • 3,453
  • 8
  • 35
  • 69
Yuvaraj P
  • 2,067
  • 3
  • 15
  • 12

6 Answers6

384

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.

Gottlieb Notschnabel
  • 9,408
  • 18
  • 74
  • 116
witttness
  • 4,984
  • 4
  • 25
  • 24
  • 68
    This should be the selected answer. – Patrick Cullen May 13 '14 at 01:31
  • 11
    Notice about Bootswatch.com is very helpful. Thanks. – Daniel Kmak Jul 07 '14 at 19:14
  • @Daniel ... but it should be refactored according with twbs/bootstrap new direction to have a stable, consistent feature to his theme clients – Luca G. Soave Jun 19 '15 at 09:16
  • Isn't the bootstrap-theme.css file more of an override, i.e. bootstrap.css sets you up in such a way that you can use bootstrap with all the relevant styling. Bootstrap-theme.css is there to override styles WITHOUT changing the base css file. The importance here is that if you upgrade to bootstrap X.X you replace the base css file and you won't have to be concerned about losing all your customizations. You may have to tweak your theme file, but that's far less of a concern. Perhaps what you were saying. – Jacques Mar 23 '16 at 15:51
  • 2
    The thing that's most confusing about this is that if you use the Customizing feature on the bootstrap site (http://getbootstrap.com/customize/ ), it puts your customizations in the bootstrap.css and not the theme file. That page also contains no options for modifying anything related to The Theme (tm). As far as I can see, the theme file just adds a bunch of gradients and shadows all over and does little else. – C.List May 10 '16 at 13:43
91

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.

simeg
  • 1,889
  • 2
  • 26
  • 34
joshhunt
  • 5,197
  • 4
  • 37
  • 60
  • Thanks for fololwing up on this as your answer made the most sense. I was wondering, do you know, would I simply replace the contents of `bootstrap.css` with a theme from Bootswatch.com like there site says and I could still use `bootstrap-theme.css` even with a Bottswatch theme? – Refracted Paladin Feb 28 '14 at 20:06
  • 3
    bootstrap.css = main css framework (grids, basic styles, etc) bootstrap-theme.css = extended styling (3D buttons etc) I have never used it but just had a look at it and Bootswatch seems to edit the bootstrap.css file to suit there own needs. So to use it all you need to do is download the bootstrap.css file from Bootswatch and use that. Don't use bootstrap-theme.css as well as it will probably conflict with the css from Bootswatch. – joshhunt Mar 01 '14 at 23:42
  • Thanks man, appreciate the answer! That is what I noticed as well just hadn't made it back here. Without modification you can't seem to use `bootstrap-theme` with Bootswatch. It made a mess of my site anyway. – Refracted Paladin Mar 03 '14 at 15:43
72

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).

Gottlieb Notschnabel
  • 9,408
  • 18
  • 74
  • 116
androphone
  • 1,146
  • 1
  • 9
  • 6
  • 4
    Please remind that if you use 3rd party bootstrap theme css files, you better comment-out the official bootstrap-theme.css. – Cheung Dec 19 '13 at 04:13
  • 163
    How come this is an accepted answer. It's not even an answer. Sorry. All this is saying is what's the equivalent of the file in Bootstrap 2 and anyone not familiar with Bootstrap 2 will now have to search for another answer to find out what this file does. – Mario Awad Jan 03 '14 at 19:23
  • 4
    But it's all, what I want to know. – uladzimir Jan 29 '14 at 08:54
  • 9
    Agree with @MarioAwad, this is not an answer. It is also confusing as I thought it is just the support of the old Bootstrap css, which is only partially true. – Yannis Dran Feb 07 '14 at 16:05
  • 1
    In BS 3.2, including the theme CSS indeed changes the look and feel by adding 3D shades to buttons and other things. See answer by joshhunt for details. – RajV Sep 16 '14 at 14:59
  • 1
    Not helpful since I don't know Bootstrap 2. – SacWebDeveloper Mar 02 '16 at 22:30
31

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.

Jowen
  • 5,203
  • 1
  • 43
  • 41
14

As stated by others, the filename bootstrap-theme.css is very confusing. I would have chosen something like bootstrap-3d.css or bootstrap-fancy.css which would be more descriptive of what it actually does. What the world sees as a "Bootstrap Theme" is a thing you can get from BootSwatch which is a totally different beast.

With that said, the effects are quite nice - gradients and shadows and such. Unfortunately this file will wreak havoc on BootSwatch Themes, so I decided to dig into what it would take to make it play nice with them.

LESS

Bootstrap-theme.css is generated from the theme.less file in the Bootstrap source. The affected elements are (as of Bootstrap v3.2.0):

  • List items
  • Buttons
  • Images
  • Dropdowns
  • Navbars
  • Alerts
  • Progress bars
  • List Groups
  • Panels
  • Wells

The theme.less file depends on:

@import "variables.less";
@import "mixins.less";

The code uses colors defined in variables.less in several places, for example:

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

This why bootstrap-theme.css totally messes up BootSwatch Themes. The good news is that BootSwatch Themes are also created from variables.less files, so you can simply build a bootstrap-theme.css for your BootSwatch Theme.

Building bootstrap-theme.css

The right way to do it is to update the Theme build process, but here here is the quick and dirty way. Replace the variables.less file in the Bootstrap source with the one from your Bootswatch Theme and build it and voila you have a bootstrap-theme.css file for your Bootswatch Theme.

Building Bootstrap itself

Building Bootstrap may sound daunting, but it is actually very simple:

  1. Download the Bootstrap source code
  2. Download and install NodeJS
  3. Open a command prompt and navigate to the bootstrap source folder. Type "npm install". This will add the "node_modules" folder to the project and download all the Node stuff you need.
  4. Install grunt globally (the -g option) by typing "npm install -g grunt-cli"
  5. Rename the "dist" folder to "dist-orig" then rebuild it by typing "grunt dist". Now check that there is a new "dist" folder which contains all you need to use your custom Bootstrap build.

Done. See, that was easy, wasn't it?

ThisGuy
  • 2,335
  • 1
  • 28
  • 34
2

I know this post is kinda old but...

  As 'witttness' pointed out.

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.

  I see it as Bootstrap has seen over the years that everyone wants something a bit different than the core styles. While you could modify bootstrap.css it might break things and it could make updating to a newer version a real pain and time consuming. Downloading from a 'theme' site means you have to wait on if that creator updates that theme, big if sometimes, right?

  Some build their own 'custom.css' file and that's ok, but if you use 'bootstrap-theme.css' a lot of stuff is already built and this allows you to roll your own theme faster 'without' disrupting the core of bootstrap.css. I for one don't like the 3D buttons and gradients most of the time, so change them using bootstrap-theme.css. Add margins or padding, change the radius to your buttons, and so on...

user1946683
  • 21
  • 1