How to activate autocomplete with Bootstrap

I am using WebStorm version 10 and I wonder if I can use autocomplete for bootstrap classes.
Is it possible?
Thank you.

13 comments
Comment actions Permalink

You need to make sure that your .css files are linked to HTML using <link> tags - only those CSS selectors that are defined in stylesheet files explicitly linked to HTML are available in completion. See https://devnet.jetbrains.com/message/5528076#5528076 for more info

0
Comment actions Permalink

Hello Elena, I am linking the css file using link tag as below:

<head>
<meta charset="UTF-8">
<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Title</title>
</head>
<body>
<script>

</script>
<h3 class="custom text-center">hello worl</h3>

</body>
</html>

Still I cannot get auto completion for bootstrap classes like text-center. Please can somebody help on this ?
0
Comment actions Permalink

please download `bootstrap.css` to your project directory. WebStorm can't use online resources referenced via CDN links for completion. You need to have stylesheet files available in your project, referenced via relative paths

4
Comment actions Permalink

Will completion work from CDN in any any future versions?

4
Comment actions Permalink

it certainly very annoying not to have code completion working from CDN.   Just about any free IDE has this working somehow, why not Webstorm?

Thanks

 

5
Comment actions Permalink

It is extremely inconvenient to have to download and place the Bootstrap CSS file in a development environment in an identical path and directory structure as the production deployed code will expect to see.  Any significantly large or complex web application is going to use a deployment system to handle things like dependencies, fail-over, promotion, roll-back, etc. As such, it's likely to make it impossible for an IDE-using developer to have their work space configured to contain all the same web server DOCUMENT ROOT relative links to assets like CSS files work correctly, especially when working on partials which will ultimately compose the final web page.

One right way for JetBrains to handle this is to provide a way for the IDE to use an External Library reference (such as the PHP include paths in PHPStorm) which can be pointed at the developer's local reference copy of Bootstrap's CSS.

The alternative is a great deal of wasted time and effort that each developer using JetBrain's IDEs with Bootstrap CSS (or any CSS library) has to make to kludge up some kind of alternative way of finding the needed file.  That is not "developing with pleasure."

7
Comment actions Permalink

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.

It would be nice if JetBrains would automate this process by providing an easy option to Download CSS files from CDN links and save them as global libraries like it does for JS files.

3
Comment actions Permalink

Since 2019.3 <link href="..."/> will get a warning with a quick fix (Alt+Enter) to download the remote CSS file.

The CSS file will be downloaded and saved not in the project but in the IDE's config folder, and it will be configured as a JavaScript Library. As a result, the warning will disappear, code completion for CSS classes will start to work.

6
Comment actions Permalink

To add to this, if someone has already downloaded the library and they still don't have autocomplete make sure it is enabled in libraries by going to Settings -> Languages & Frameworks -> Javascript -> Libraries and checking enabled if it isn't already.

2
Comment actions Permalink

i currently use sublime text3 and was facing the same problem. But I found a rather easier solution, all had to was 

preferences>control package> type"install package">look for bootsrtap4 autocomplete and instal it 

 

0

Please sign in to leave a comment.