How to activate autocomplete with Bootstrap

Created May 14, 2015 13:38

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

Rakesh Sharma

Created March 29, 2017 14:53

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 ?

Elena Pogorelova

Created March 29, 2017 15:12

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

Simon Martinelli

Created May 26, 2017 18:11

Will completion work from CDN in any any future versions?

Elena Pogorelova

Created May 26, 2017 18:54

no, unlikely

Mark Mneimneh

Created November 26, 2017 18:55

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

Cxjohnson

Created February 03, 2018 00:13

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

Lucas Cava

Created February 21, 2018 06:15

Vote here:

https://youtrack.jetbrains.com/issue/IDEA-174025

Cxjohnson

Created August 31, 2018 20:30

Also vote here:

https://youtrack.jetbrains.com/issue/WEB-10023

Turret24

Created November 23, 2019 01:28

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.

Elena Pogorelova

Created November 23, 2019 08:48

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.

Raymond Devries

Created February 25, 2020 08:36

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.

Sharma A Shreedhar

Created July 18, 2020 15:05

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

chappie74

Created May 29, 2021 14:39

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

aminashofteh

Created January 28, 2024 16:10

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>

Seandenny

Created July 03, 2024 22:51

Piggybacking off of Turret24 - The option to add a stylesheet seems to be gone now, but if you include the js and css files in a separate folder, you can add the whole folder as the library and it'll include the css files as well. This enabled autocomplete for me!

Aitelcadimohssin

Created July 07, 2024 08:54

Thank You Elena Pogorelova

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.

It's Worked