Why Does Bootstrap Include a Bootstrap-Theme File

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.

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.

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.

How to I import a bootstrap theme in svelte?

You may move all the assets you have generated to the "public" folder of your Svelte project, then you have two options.

You can import them as usual in your "index.html", also in the "public" folder, like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/build/bundle.css'>
    <script src="/plugins.bundle.js"></script>
    <script src="/scripts.bundle.js"></script>
    <!-- ... -->

    <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

Or you can do that by using the special svelte:head element at the top of your "App.svelte" file:

<svelte:head>
    <script src="/plugins.bundle.js"></script>
    <script src="/scripts.bundle.js"></script>
    <!-- ... -->
</svelte:head>

Use of bootstrap theme on Jhispter?

You need to import the necessary files of the theme you want. Most bootstrap themes are composed of CSS files and some JS mainly, etc.

Import those files in your jhipster project could do it through "vendor.ts", with the following steps.

1. Go to "myprojectjh\src\main\webapp\content".
2. Create a folder for your theme. (ex. "mytheme01").
3. Open the created folder and copy the necessary files of the theme (ex: "theme.css").
4. Go to "myprojectjh\src\main\webapp\app" and open the file "vendor.ts".
5. Write the following line to import the necessary files (ex: "theme.css").
   import '../content/mytheme01/theme.css'.
6. Save the changes and run your application again.

Your file vendor.ts could look like this:

NOTE: Additionally, you can edit the file "_bootstrap-variables.scss" or "global.scss" to make some other necessary adjustments so that your theme is displayed correctly.

I hope that helps you.

---

Related Topics