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.

5
15 comments

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.

24

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."

9

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.

8

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.

6

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

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

Will completion work from CDN in any any future versions?

4

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

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

Elena Pogorelova 's answer is the correct way to do it if you are using CDN files. 

0

hi everyone, my test in phpstorm (I don't check it yet in Webstorm) shown that if I use File > Invalidate cache, after restarting IDE everything fixed and can use autocomplete for bootstrap and so on, my check works when I use local bootstrap css and js and also when use cdn links for them. please excuse me for my bad english writing skill, thanks, hope to God.

 

my sample test :

<!doctype html>
<html dir="ltr" lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>

<table class="table table-striped table-primary table-hover">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr class="">
        <th scope="row" class="table-active">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

<script src="./scripts/bootstrap.js"></script>
</body>
</html>
0

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 

 

-2

Please sign in to leave a comment.