how can I add bootstrap auto code completion feature in IntelliJ IDE?

Question

I added Bootstrap3 plugin in my IntelliJ IDEA and also added the css and js links in the html page. But I couldnt get the autocompletion for bootstrap class names etc. How can I achieve that?

Discontinue

what do the links look like? normally adding <link> tag with a path to project local .css file is enough to get the completion. Do you have <style> tags in your HTML? – Aviculture

No. When I am trying to write <div class="container"> it doesnt give any suggestions for class names in bootstrap even though I have bootstrap css CDN in my html pages. – Discontinue

@Aviculture Even though I added <link> tag with local css file references, I couldnt get the auto completion. – Discontinue

does Idea resolve a path to your .css in <link> tag? Ctrl+click on file name - is it opened? – Aviculture

Yes @Aviculture when I do that, the code is opening in the browser.. – Discontinue

Answer 1

I had the same issue and ended up finding this: https://intellij-support.jetbrains.com/hc/en-us/community/posts/206324479-How-to-activate-autocomplete-with-Bootstrap

trick is that you can't use the cdn delivered css - you have to have it locally referenced.

This line worked for me (html file is in .../resources/templates/ and bootstrap .css file was downloaded to .../resources/static):

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

I did have to wait a bit for intellij to index it first.

Hope that helps :)

Levulose

Still valid in 2021 (thanks!) -- downloading local copies of those CDN-delivered files enabled IntelliJ IDEA autocompletion (as soon as it finished indexing them), even without referencing the local files. FWIW, for ease of reference as well as autocompletion, I went with the non-minified versions (downloaded to grails-app/assets/javascripts or grails-app/assets/stylesheets as appropriate, since I'm using Grails 4). The references are still using the CDN links, e.g: <g:external uri="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/> – Maunder

Answer 2

Go to:

Preferences -> Languages & Frameworks -> JavaScript -> Libraries -> Add -> then press '+' -> Attach files -> bootstrap.min.css -> OK

Elishaelision