There are a few directions for creating sub-themes for Bootstrap but none quite covered all the steps. For simplicity's sake, I'm going to use the name customtheme for my theme's name and title. Feel free to use whatever makes sense for your site instead of customtheme.

Step 1: Install the Boostrap theme

Download the latest version of the Bootstrap theme. Decompress the contents and drag the entire folder into core/themes/. Check to see that installed properly under the admin appearance. It should be listed under uninstalled themes. Click the install button.

Step 2: Pick a starter kit

Navigate to the newly created bootstrap folder in core/themes/, and go into the starterkit directory. You should see three folders, CDN, LESS and SASS. Each of these are variants based on Bootstrap 3. Personally, I use Sass but for this example, it doesn't matter.

Step 3: Copy your preferred setup into /themes in the root of your site.

Copy the selected folder into /themes Rename the directory to something that is acceptable for Drupal's theme naming conventions (No spaces etc).

Step 4: Change file names

In your site you should have:

  • /config
    • /install
      • THEMENAME.settings.yml
    • /schema
      • THEMENAME.schema.yml
  • /images
  • logo.svg
  • README.md
  • screenshot.png
  • /scss (this is dependent on theme you selected)
  • /templates
  • THEMENAME.libraries.yml
  • THEMENAME.starterkit.yml
  • THEMENAME.theme

Change the names of the bolded files to your themename. Change the starterkit to info. It should look something like this:

  • /config
    • /install
      • customtheme.settings.yml
    • /schema
      • customtheme.schema.yml
  • /images
  • logo.svg
  • README.md
  • screenshot.png
  • /scss (this is dependent on theme you selected)
  • /templates
  • customtheme.libraries.yml
  • customtheme.info.yml
  • customtheme.theme

Step 5: Edit the yml files.

/config/schema/customtheme/customtheme.schema.yml

change the instances of THEMNAME and title. 

    # Schema for the theme setting configuration file of the THEMETITLE theme.
    THEMENAME.settings:
      type: theme_settings
      label: 'THEMETITLE settings'

Example:

     # Schema for the theme setting configuration file of the customtheme .
     customtheme.settings:
       type: theme_settings
       label: 'customtheme settings'

Next open up customtheme.info.yml and change the the THEMENAME and THEMETITLE

core: 8.x
type: theme
base theme: bootstrap

name: 'THEMETITLE'
description: 'Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).'
package: 'Bootstrap'

regions:
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'

libraries:
  - 'THEMENAME/global-styling'
  - 'THEMENAME/bootstrap-scripts'

Example

   core: 8.x
   type: theme
   base theme: bootstrap

   name: 'customtheme'
   description: 'This is a custom theme.'
   package: 'Bootstrap'

   regions:
     navigation: 'Navigation'
     navigation_collapsible: 'Navigation (Collapsible)'
     header: 'Top Bar'
     highlighted: 'Highlighted'
     help: 'Help'
     content: 'Content'
     sidebar_first: 'Primary'
     sidebar_second: 'Secondary'
     footer: 'Footer'
     page_top: 'Page top'
     page_bottom: 'Page bottom'

   libraries:
     - 'customtheme/global-styling'
     - 'customtheme/bootstrap-scripts'

Step 6: Go to appearance and install

Your theme is now ready to go; it should appear in your appearence.

Step 6.5: Go to appearance and install

If you're using the CSS (precompiled bersion) version and want to use their implimentation of Bootstrap, go getboostrap.com (3.3)

If you're using the Sass version and want to use their implimentation of Bootstrap, go to getboostrap.com (3.3)and download the Sass version, decompress the folder and rename it to bootstrap and place in the root of your theme.

Additional notes

From here, you'll most certainly want to turn off theme caching. I found this guide super helpful.

I'd suggest following the tutorial to create a local local.services.yml to enable debugging and the cache to false as well. Also, I recommend checking out, the article Drupal 8 fundamentals.

More Posts About Drupal