18

What do I have to change in my webstorm IDE that the bootstrap classes are recognized when I do:

<a class="btn btn-primary" />

At the moment I have always to re-check the class names by looking into the bootstrap css files. Thats not so nice...

Gal Margalit
  • 5,525
  • 6
  • 52
  • 56
Pascal
  • 12,265
  • 25
  • 103
  • 195
  • It should be automatically finding the classes for you as you type them out... Assuming you aren't copying/pasting you should be able to have webstorm give you a quick look of available classes. – BuddhistBeast Jul 13 '14 at 20:24
  • @Pascal have you solved this issue ? i can't get the classes in Bootstrap to auto complete either. – eran otzap Aug 15 '15 at 17:44

8 Answers8

23

I had the same problem and finally fixed it!! You need to download the Bootstrap library LOCALLY.

This worked:

    <link rel="stylesheet" href="./css/css/bootstrap-theme.min.css" >

But this didn't work:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

Cheers, JJ

J.J.
  • 350
  • 2
  • 6
  • @KrzysztofTrzos There is an feature request regarding this issue: https://youtrack.jetbrains.com/issue/WEB-31724 – robsch Jul 25 '18 at 11:44
4

For a quick-fix, downloading the bootstrap.min.css or whichever you are using locally, and then referencing it like

<link href="stylesheets/bootstrap.min.css" rel="stylesheet">

solves the problem.

I think another way for WebStorm to be able to autocomplete without referring to it locally would be to add the file as an external library

Pranay Shirolkar
  • 157
  • 8
3

Finally I got the solution:

  • Right click on style folder
  • Mark directory as test sources root
Bugs
  • 4,491
  • 9
  • 32
  • 41
Rajesh Meena
  • 56
  • 2
2

For me the problem is the way i referenced the css files.

My file structure :

Project
   /App 
      -index.html
   /bower_components
       /bootstrap
          /dist 
             /css 
               -bootstrap.css

and i referenced them like so : 

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bower_components/bootswatch/superhero/bootstrap.min.css" />

The css was applied but no intellisence was provided. I think the css was applied due to my .bowerrc file. 

 {
   "directory": "bower_components"
 }

I changed the path to the relative one and webstorm recognized my bootstrap classes. 

 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css" />
 <link rel="stylesheet" href="../bower_components/bootswatch/superhero/bootstrap.min.css" />
eran otzap
  • 12,293
  • 20
  • 84
  • 139
  • 2
    by doing this you "fixed" code completion, but you broke grunt build. grunt looks for vendor css and js files in `bower_components` folder (*not* `..\bower_components`). I read that WS 11 has a better integration with yeoman, and this problem is fixed. Don't know if it is fixable in WS10, however – Felix Sep 13 '15 at 01:27
  • @Felix I'm new to grunt .. can you elaborate on "you broke the grunt build". To my understanding Grunt will still find them under the root folder in bower_components this is just a reference from index. It does not relay on how i referenced them from my index.html for the build. – eran otzap Sep 13 '15 at 10:48
0

If you are using style tag in your PHP page, it prevents loading CSS class code completion.
Put your styles into CSS file then load it and remove style tag.

סטנלי גרונן
  • 2,917
  • 23
  • 46
  • 68
masoud amirian
  • 41
  • 1
  • 2
  • 9
0

I had to mark my styles directory, which contains my css, as "Resources" in module settings. I also had to mark my bower components and node module directories as "Sources".

antonkronaj
  • 1,237
  • 12
  • 13
0

To add stylesheets to your global JS libraries:

  1. Open the IDE Preferences menu and go to Languages & Frameworks > JavaScript > Libraries
  2. Select the library you wish to add a stylesheet to and click Edit... on the right-hand side
  3. Click the + button just above Documentation URLs and select Attach Files...
  4. Find and select the stylesheet you wish to add, then click OK to close the Edit Library dialogue window

The stylesheet is now attached to the global JS library, so you will get CSS code completions/recommendations from the stylesheet whenever you include the JS library for a project in the IDE.

Vikas Dwivedi
  • 5,233
  • 1
  • 21
  • 16
-3

Make sure it is turned on. Do the following in WebStorm:

File | Settings | IDE Settings | Editor - Code Completion

Or:

File | Settings | Type in the search bar "code completion"

The second option will take you straight to the code completion options if in some case you could not find it via the first way.

More information can be found here

BuddhistBeast
  • 2,652
  • 2
  • 21
  • 29
  • add auto-complete settings are on.. but webstorm still not suggesting for bootstrap classes.. but only for normal html tags.. any idea ? – Dhruv Sep 03 '14 at 14:34
  • Are you referencing your Bootstrap files correctly? – BuddhistBeast Sep 03 '14 at 16:10
  • 5
    means? may you please elaborate.. how to refer bootstrap files? – Dhruv Sep 04 '14 at 13:35
  • 2
    This is not ideal. If you are dealing with an html fragment ( think react of angular ) the IDE won't know you are trying to reference a bootstrap class, because you haven't explicitly included it in your fragment. – Simon May 14 '16 at 06:41
  • 2
    I actually think that Jenny's answer should be marked as correct because this is an issue where the files were not locally accessible. – BuddhistBeast May 15 '16 at 21:00
  • The answer by @rajesh-meena - https://stackoverflow.com/a/45346665/1006651 solves the problem – Anoop Naik Jun 06 '20 at 13:08