How to Use Bootstrap-Theme.CSS with Bootstrap 3

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.

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.

How to run Bootstrap 3.0.2 with newer versions of Less?

The issue was a change in Less 1.4.0 Beta 1 & 2 (2013-03-07)

maths is now only done inside brackets. This means font: statements, media queries and the calc function can use a simpler format without being escaped. Disable this with --strict-maths-off in lessc and strictMaths:false in JavaScript.

You can use the --strict-maths-off flag but I decided to plug in Bootstrap v3.3.7 and update the theme to support the newer Bootstrap (and less).

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.

Module not found: Can't resolve 'bootstrap/dist/css/bootstrap-theme.css' in 'C:\react-form-validation-demo\src'

In Bootstrap version 4, the file 'bootstrap-theme.css' has been removed, according to the issue on GitHub. See the change history for details.

If you want to continue using version 4, remove this import, else downgrade to version 3.

Use 'Bootstrap' theme

PrimeNg used to have some free themes. One of them was a Bootstrap theme. It was different from Bootstrap, but just had Bootstrap-like look and didn't require Bootstrap as a dependency.

At the time of writing this answer, PrimeNG 6.1.0 has deprecated all free themes except nova theme with three variations nova-colored, nova-light and nova-dark.

To apply PrimeNG free theme, just import theses files in your style.css:

@import url("../node_modules/primeicons/primeicons.css");
@import url("../node_modules/primeng/resources/themes/nova-colored/theme.css");
@import url("../node_modules/primeng/resources/primeng.min.css");

stackblitz demo

In old versions of PrimeNG 5.x, we could apply the Bootstrap theme like this:

@import url("../node_modules/font-awesome/css/font-awesome.min.css");
@import url("../node_modules/primeng/resources/themes/bootstrap/theme.css");
@import url("../node_modules/primeng/resources/primeng.min.css");

UPDATE:

PrimeNG old free themes are no longer maintained after PrimeNG 6.1.0 is released:

Free themes prior to 6.1 are now deprecated and will not be maintained
anymore as they were outdated and hard to maintain due to their
implementation. With 6.1.0, whether free or premium, all themes
offered will be developed by PrimeNG Theme Designer. This will help us
maintain all themes from a central location.

---

Related Topics