# Best practices to import Bootstrap theme

**URL:** <https://discuss.emberjs.com/t/best-practices-to-import-bootstrap-theme/10895>\
**Category:** Design\
**Created:** [June 9, 2016, 3:55pm UTC](https://discuss.emberjs.com/t/best-practices-to-import-bootstrap-theme/10895 "2016-06-09T15:55:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Motocarota](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/motocarota/32/12309_2.png) [@Motocarota](https://discuss.emberjs.com/u/Motocarota)\
**Post date:** [June 9, 2016, 3:55pm UTC](https://discuss.emberjs.com/t/best-practices-to-import-bootstrap-theme/10895/1 "2016-06-09T15:55:48Z")

</div>

Hello there

This is my first project with Ember.js and I’m following [this tutorial](http://yoember.com/) as starting point to my project. I was asking myself what are the best practices to import a bootstrap theme.

I am currently using Bootstrap-Sass “3.3.6” and a bootstrap theme I installed it through bower. If I get it right I must import this file in my **ember-cli-build.js** file with **app.import** command like this:

`app.import('bower_components/theme-name/build/css/custom.min.css')`

And then I have the css inside my **vendor.js** , as expected.

So my question is: is this the best practice or I should add the file to my style.scss through an @import statement?

What is the recommended way?

---

<div class="post-metadata">

**Author:** ![zoltan](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/zoltan/32/16699_2.png) [@zoltan](https://discuss.emberjs.com/u/zoltan)\
**Post date:** [June 21, 2016, 9:57am UTC](https://discuss.emberjs.com/t/best-practices-to-import-bootstrap-theme/10895/2 "2016-06-21T09:57:44Z")

</div>

If you use sass, and you would like to use Bootstrap variables to customize your settings, just save `_variable.scss` in your `style` folder, import it before bootstrap and change the variables in this custom `_variables.scss`.

You can see here an example: [tutorial-builder/app/styles at master · zoltan-nz/tutorial-builder · GitHub](https://github.com/zoltan-nz/tutorial-builder/tree/master/app/styles)

I think, this is quite easy and convenient way to manage Bootstrap, additionally Ember CLI can compile and minify your css quickly. 🙂

---

<div class="post-metadata">

**Author:** ![tgandee](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/tgandee/32/11961_2.png) [@tgandee](https://discuss.emberjs.com/u/tgandee)\
**Post date:** [June 28, 2016, 2:39pm UTC](https://discuss.emberjs.com/t/best-practices-to-import-bootstrap-theme/10895/3 "2016-06-28T14:39:28Z")

</div>

Depending on the customization I have a few approaches.

The first minimal theming would involve the above variable override, creating a local variable file declaring your custom variable values and importing that file before the Bootstrap modules.

The next step would be to create override files named for the Bootstrap modules “\_[bs-module]-over.scss”. Here you would import the Bootstrap modules in you “app.scss”, then import your new override files. These css rules would be further down the cascade and overwrite the Bootstrap class ruleset.

The final and largest theming example is for fully adopting the Bootstrap library as your own. I would create a sub-directory in my local “styles” directory called “bootstrap-custom”. In this directory, I would have a copy of the “bootstrap.scss” file from “bower\_components/bootstrap” (or node\_modules). This custom Bootstrap file has all the bootstrap module import statements. From here you can import from the bower/npm packages as the stock modules or create local copies of the modules or mixins and import accordingly. If you are going this route, definitely create a local copy of “\_variables.scss”. This allows you keep control all the modules being added to your site, create the correct style without override styles, and to learn about Bootstrap and their cascade structure.