4

I am using latest bootstrap version(7.x-3.8) . I want create a subtheme by using SASS but i don't know how to proceed.

4

Create a New Sub-theme

  1. Copy bootstrap/starterkits/sass folder into sites/all/themes or a respective sites/*/themes folder.
  2. Rename the folder to a unique machine readable name. This will be your sub-theme's "name". For this example and future examples we'll use subtheme.
  3. Rename subtheme/sass.starterkit to match the folder name and append .info (e.g. subtheme/subtheme.info).
  4. Open subtheme/subtheme.info and change the name, description and any other properties to suite your needs.
  5. Download and extract the latest 3.x.x version of Bootstrap Framework Source Files into the root of your new sub-theme. After it has been extracted, the directory should be renamed (if needed) so it reads subtheme/bootstrap.

Compile Sass

  1. Override default bootstrap variables in subtheme/sass/_default-variables.scss.
  2. Edit subtheme/sass/overrides.scss as your fit to properly integrate with Drupal
  3. Compile subtheme/scss/style.scss to subtheme/css/styles.css.

More Information : Read Drupal-Bootstrap Documentation

  • As you say i create a sub theme. Now my confusion is that where i write my css . in style.scss or styles.css – Pankaj Yogi Nov 14 '16 at 11:55
  • style.scss is to glue all files for compile. styles.css is the output from style.scss. So if you want to change default bootstrap variables write in _default-variables.scss else write in _overrides.scss. Or you can import your own files in style.scss as you need. – Thew Nov 14 '16 at 11:56
  • @PolarBear Hi, I have one question, I did as described in your answer, but after this stage it is showing the site like without any css implementation like what we see when we install the base theme(like Zen). So, how can I apply the default bootstrap theming in my sub-theme so It provides the default bootstrap style and also provides the feasibility to alter it if we want to customize. Very thanks – CodeNext Dec 18 '16 at 13:09
  • @CodeNext Normally, after finished those steps will see the result like default bootstrap base-theme. Did you compile sass or clear cache? You can see the error of loading CSS by pressing F12. – Thew Dec 20 '16 at 11:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.