Best IT Recipes

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

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

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

+171
html css twitter-bootstrap-3
Aug 20 '13 at 5:27
source share
7 answers

After loading Bootstrap 3.x, you will get bootstrap.css and bootstrap-theme.css (not to mention mini-versions of these files, which are also present).

bootstrap.css

bootstrap.css fully designed and ready to use if it is your desire. It may be a little simple, but it is ready, and it is.

You do not need to use bootstrap-theme.css if you do not want this and everything will be fine.

bootstrap-theme.css

bootstrap-theme.css is what tries to specify the file name: it is a bootstrap theme that is creatively considered a "bootstrap theme". The file name confuses things a bit, since the basic bootstrap.css already applied the style, and I would first consider these styles by default. But this conclusion seems to be incorrect in light of what was said in the examples section of the Bootstrap documentation regarding this bootstrap-theme.css :

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

The above quote is found here http://getbootstrap.com/getting-started/#examples in a thumbnail that links to this example page http://getbootstrap.com/examples/theme/ . The idea is that bootstrap-theme.css is a theme , and it is optional.

Themes at BootSwatch.com

About themes on BootSwatch.com: these themes are not implemented like bootstrap-theme.css . BootSwatch themes are modified versions of the original bootstrap.css . Thus, you definitely should NOT use the theme from BootSwatch and the bootstrap-theme.css at the same time.

Custom theme

About your own custom theme: you can change bootstrap-theme.css when creating your own custom theme. This can simplify the style change without violating any of Bootstrap's built-in functions.

+374
May 7 '14 at 15:40
source share

Example css styles: http://getbootstrap.com/examples/theme/

If you want to see how the example looks without the bootstrap-theme.css file, open the browser developer tools and remove the link from the <head> of the example, and then you can compare it.

I know this is an old question, but sent it just in case someone is looking for an example of what it looks like.

Update

bootstrap.css = basic css structure (meshes, basic styles, etc.)

bootstrap-theme.css = advanced style (3D buttons, gradients, etc.). This file is optional and does not affect bootstrap functionality at all, it only improves appearance.

Update 2

With the release of v3.2.0, Bootstrap added the ability to view css themes on document pages. If you go to one of the pages of the document ( css , components , javascript ) you should see the "View Topic" link at the bottom of the side navigation bar, which you can use to turn the css theme on and off.

+90
Jan 16 '14 at 22:19
source share

Firstly, bootstrap-theme.css is nothing but the equivalent of Bootstrap 2.x style in Bootstrap 3. If you really want to use it, just add it ALONG with bootstrap.css (the shortened version will work too).

+72
Aug 25 '13 at 18:48
source share

Bootstrap-theme.css is an optional CSS file that you don't need. It provides 3D effects for buttons and some other elements.

+32
Oct 18 '13 at 12:54 on
source share

As pointed out by others, the bootstrap-theme.css file name is very confusing. I would choose something like bootstrap-3d.css or bootstrap-fancy.css , which would be more visual from what it actually does. What the world sees as a “Bootstrap theme” is a thing you can get from BootSwatch, which is a completely different beast.

With that said, the effects are pretty nice - gradients and shadows and the like. Unfortunately, this file will hurt BootSwatch themes, so I decided to delve into what it takes to get it to play well with them.

SMALLER

Bootstrap-theme.css is created from the theme.less file in the Bootstrap source. Damaged items (starting with Bootstrap v3.2.0):

  • List items
  • Buttons
  • Images
  • Dropdowns
  • Navbars
  • Alerts
  • Progress indicators
  • List of groups
  • Panel
  • Wells

The theme.less file depends on:

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

The code uses the colors defined in the variables. 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 is why bootstrap-theme.css will completely ruin BootSwatch themes. The good news is that BootSwatch themes are also created from .less variable files, so you can just create bootstrap-theme.css for your BootSwatch theme.

Build bootstrap-theme.css

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

Creating Bootstrap itself

Building Bootstrap may seem complicated, but actually it is very simple:

  • Download Bootstrap Source Code
  • Download and install NodeJS
  • Open a command prompt and browse to the source boot folder. Type "npm install". This will add the node_modules folder to the project and load all the Node materials you need.
  • Install grunt globally (-g option) by typing "npm install -g grunt-cli"
  • Rename the dist folder to dist-orig, then rebuild it by typing grunt dist. Now check that there is a new “dist” folder that contains everything you need to use your own Bootstrap build.

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

+14
Oct 26 '14 at 22:30
source share

I know this post is a little old, but ...

As noted by "witttness".

About your own custom theme When creating your own theme, you can change bootstrap-theme.css. This can simplify the style change without violating any of Bootstrap's built-in functions.

I see that Bootstrap has seen over the years that everyone wants something a little different from the basic styles. Although you can modify bootstrap.css, it can break things, and it can make upgrading to a newer version a real pain and time consuming. Downloading from the theme website means you have to wait if that creator updates this theme, sometimes big , if , right?

Some people create their own custom.css file, and that’s fine, but if you use “bootstrap-theme.css”, many things are already built, and this allows you to quickly minimize your own theme without destroying the bootstrap kernel .css. For some, I don’t like 3D buttons and gradients most of the time, so change them with bootstrap-theme.css. Add margins or padding, change the radius to your buttons, etc. ...

+2
Apr 02 '15 at 15:51
source share

Rather, an old post, but I thought I would add two cents about topics. It is clear that many people (including me) love the bootstrap structure with its flexible grid, but we also want to distinguish ourselves from other sites out of the box. The availability of unique themes and bootstrap patterns has exploded in the last few years. I recently created my own website to provide some of these topics: http://thetoolsmith.com (shameless plugin)

The bottom line is that you still need the basic bootstrap platform, but you can modify or add styles to bootstrap-theme.css so that it works with the main files, but it looks different than you can your own.

+1
Jan 21 '16 at 20:02
source share


More articles:


All Articles