CODEWITHSUNDEEP
asp.nettwitter-bootstrapvisual-studio
Scitosol
Scitosol

Reputation: 171

Manually Install Bootstrap in Visual Studio

Bower apparently does not work for installing Bootstrap into a Visual Studio project any more:

https://developercommunity.visualstudio.com/content/problem/134643/bootstrap-cannot-be-installed-via-bower.html

I am doing an ASP.Net Core 2 MVC project in Visual Studio 15.4.

It seemed simple enough to me that I would just download Bootstrap and drop it in my project, then reference the bootstrap.css file from my views in the normal manner using the link tag.

I downloaded bootstrap-4.0.0-alpha.6.dist and placed it in the wwwroot folder of my project. The folder is definitely unzipped and where I think it is. Down one level is a folder named css, and in this folder resides bootstrap.css.

Then I have an ordinary view like this: 

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <link rel="stylesheet" href="~/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.css" />
</head>
<body>
    <h3 class="text-center">Hello, World!</h3>
</body>
</html>

And it seems that the page cannot locate the stylesheet. When I run the project, the Bootstrap classes are not applied. And when I click on the View Source option for the page and click on the address for the stylesheet, it indeed tells me that it cannot find the stylesheet: 

No webpage was found for the web address: http://localhost:62732/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.css
HTTP ERROR 404

I have tried every variation on the address that I can think of, such as: 

<link rel="stylesheet" href="../wwwroot/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.css" />

but to no effect. I have also gotten this result in three different browsers.

I did this outside of Visual Studio with ordinary text files and got it to work. There must be something I don't understand about how MVC views resolve the locations of stylesheets.

Does anyone know what I'm doing wrong, or else a better approach to a workaround for the issue?

Upvotes: 3

Views: 29921

Answers (2)

Nati
Nati

Reputation: 121

NuGet package manager: https://www.nuget.org/packages

You could also copy the folder of the package after it has been installed on a project. You can find packages used in your project at:

C:\Users\%user_name%\source\repos\%project_name%\packages

Copy the folder of the package that you want for offline purposes and paste it in:

C:\Program Files (x86)\Microsoft SDKs\NuGetPackages

So whenever you want to add packages you don't have to write it as a command. Remember to restart your Visual Studio after you do it.

Go to Tools > Nuget Package Manager > Manage Nuget Packages for Solution..., then change the Package source to Microsoft Visual Studio Offline Packages. It should be there in the Browse section.

For more information, see this video: https://www.youtube.com/watch?v=M2AyQnYrNR4

Upvotes: 1

tebok
tebok

Reputation: 390

The simplest way is to use the NuGet console.

simply navigate to:

Open VS >> Tools menu >> NuGet Package Manager >> Console Command.

Alternatively: Options >> NuGet Package Manager >> Package Sources dialog box.

Once the console appears at the bottom page, type: 

PM> Install-Package bootstrap -Version 3.3.7

If this gives you any issues or helps, please let me know.

Upvotes: 9

Related Questions