Visual Studio intellisense for Bootstrap via CDN

A

10

25

I've installed Bootstrap via the Microsoft CDN like:

<head>
    ...
   <link href="//ajax.aspnetcdn.com/ajax/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
   <link href="//ajax.aspnetcdn.com/ajax/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
</head>

and

<body>
    ...
    <script src="//ajax.aspnetcdn.com/ajax/bootstrap/3.1.1/bootstrap.min.js"></script>
</body>

Everything is working fine with Bootstrap, however, Visual Studio isn't giving me any kind of intellisense for the classes.

For example, typing

<div class="(intellisense should open here)

nothing comes up.

Is there any way to get intellisense from the CDN?

Alister answered 18/6, 2014 at 23:14 Comment(3)

what version of visual studio? – Cinematograph 19/8, 2014 at 9:32

@Alister did you every get that to work? I am dealing with the same thing over here. VS 2013 Ultimate MVC. The css is being referenced in _Layout.cshtml... – Sopping 21/11, 2015 at 15:33

No, I never did. I just have the .css files in my solution and Intellisense picks them up, even though I never use them. – Alister 21/11, 2015 at 16:32

C

11

You can add CDN references to intelliSence for javascript, however, css is not supported.

Visual Studio 2013 options

You can add the file to your project and it will work, you dont need to add a ref to html, just to project and it should resolve your issue.

Cerebellum answered 7/1, 2015 at 18:13 Comment(2)

Can you use {version} in this? – Alister 7/1, 2015 at 21:8

The JavaScript\IntelliSense\References node is not present in Visual Studio 2017. Even translating the JavaScript to JavaScript/TypeScript in the aforementioned path does not find the References node. I'm thinking that MS removed it. – Cleavage 19/7, 2017 at 16:33

I

34

If you are working with ASP.NET Core project do as follows. VS only reference files inside the wwwroot folder. You need to open the .csproj file and add the following code segment.

<ItemGroup>
  <None Include="node_modules/**" />
</ItemGroup>

After that VS will picking up intellicen from node_modules.

Inulin answered 23/12, 2018 at 6:10 Comment(4)

Works like a charm! Although I made my include specific to the bootstrap path as there are a lot of node modules I just don't care to see. – Sigman 6/3, 2019 at 17:34

Thank you - was driving me nuts. Confirmed in VS 2019 16.3 – Mcfarland 18/10, 2019 at 9:52

Great! Thank you. – Pertussis 18/10, 2019 at 22:1

Can confirm this still works in a VS 2019 Razor project. I referenced <None Include="node_modules\tailwindcss\dist\*.css" /> to get support for TailwindCSS – Froma 15/12, 2020 at 0:1

C

11

You can add CDN references to intelliSence for javascript, however, css is not supported.

Visual Studio 2013 options

You can add the file to your project and it will work, you dont need to add a ref to html, just to project and it should resolve your issue.

Cerebellum answered 7/1, 2015 at 18:13 Comment(2)

Can you use {version} in this? – Alister 7/1, 2015 at 21:8

The JavaScript\IntelliSense\References node is not present in Visual Studio 2017. Even translating the JavaScript to JavaScript/TypeScript in the aforementioned path does not find the References node. I'm thinking that MS removed it. – Cleavage 19/7, 2017 at 16:33

B

5

You need to install bootstrap through the NuGet Packages. Intellisense will start working after that.

Belgian answered 25/11, 2015 at 7:56 Comment(0)

B

1

Open Visual Studio

Go in Extensions and Updates and then click on Online Tab.

In Search type Bootstrap.

Install following Packs to enable intellisense. Ensure that you have dragged bootstrap.css (or bootstrap.min.css and js file) before trying to insert snippet.

Bootstrap Bundle
Bootstrap Snippet Pack

Berey answered 12/5, 2016 at 10:28 Comment(2)

This solution immediately fixed my intellisense problem. Specifically the Bootstrap Bundle package. – Clevey 20/12, 2016 at 8:7

Bootstrap Bundle is not available for VS 2017 – Vergos 9/3, 2017 at 18:18

S

1

I just installed the bootstrap nuget

Speculate answered 28/7, 2017 at 9:17 Comment(1)

I had to update the package from 3.4.1 to 5.0.1 – Roentgenograph 16/6, 2021 at 20:42

C

0

TOOLS->Options->Text Editor->the specific language ->IntelliSense

That should get the intellisense back up and running, worked for me before (think this is what you are looking for)

Clustered answered 18/10, 2014 at 23:23 Comment(4)

I know you answered "...-> the specific language ->IntelliSense" but CSS doesn't seem to have the IntelliSense-option-alernative? – Rollandrollaway 22/12, 2014 at 21:48

what version of VS are you using? 2012? 2013? – Clustered 23/12, 2014 at 15:55

I have Visual Studio 2013 – Rollandrollaway 26/12, 2014 at 0:41

Hi Hauns, there was a change between 2012 and 2013, this answer is the best I could offer, click the link: link - hope it helps! – Clustered 28/12, 2014 at 5:37

A

0

I know this way is not exactly CDN, but it worked for me and you can still keep your packages up-to-date

You can reference Bootstrap using Bower.

On the package.json you would have:

{
  "version": "1.0.0",
  "name": "TaskAngularJSApp",
  "private": true,
  "devDependencies": {
    "grunt": "0.4.5",
    "grunt-contrib-uglify": "0.7.0",
    "grunt-contrib-watch": "0.6.1",
    "bower": "1.7.3"
  }
}

Then you have bower.json file like:

{
    "name": "ASP.NET",
    "private": true,
    "dependencies": {
        "bootstrap": "*"
    }
}

Then on your html you would reference bootstrap like

    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>

I got help from: using grunt bower gulp npm with visual studio 2015 for a asp-net-4-5-project

and

Released Today: Visual Studio 2015, ASP.NET 4.6, ASP.NET 5 & EF 7 Previews - On the "HTML Editor Updates" section

Ahmed answered 20/1, 2016 at 18:51 Comment(0)

R

0

In the Content folder copy bootstrap.css.

Reverential answered 15/4, 2016 at 15:24 Comment(0)

N

0

The inclusion of the old Razor editor in the HTML settings helped me - https://github.com/dotnet/razor-tooling/issues/5669

Recommended topics

Hot tags