In an empty (template) asp.net core 2 app, after adding a Bootstrap package to the project, what else is needed to access Bootstrap?
I can see the Bootstrap NuGet under the NuGet node under dependencies. But none of the Bootstrap files in are wwwroot.
I've added one razor page with a button. However, it displays a normal looking button. Bootstrap isn't being used:
<button type="button" class="btn btn-primary">Primary</button>
You need to use Bower to install the files (see Manage client-side packages with Bower in ASP.NET Core for more info).
First add bower.json and .bowerrc files to your project root folder.
bower.json contents:
{
"name": "asp.net",
"private": true,
"dependencies": {
"bootstrap": "3.3.7",
"jquery": "3.2.1"
},
"resolutions": {
"jquery": "3.2.1"
}
}
.bowerrc contents
{
"directory": "wwwroot/lib"
}
Then from the Bower folder under Dependencies you can select Restore Packages and the files will be downloaded.
You can then reference bootstrap in a _Layout.cshtml file with both a relative link for development and a CDN link when published.
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
And in Startup.cs add UseStaticFiles to enable the web server to return the CSS and JS files.
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider serviceProvider) {
...
app.UseStaticFiles();
...
}
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" >, the browser displays this error in the console: css ignored due to mime type mismatch. If I replace it with the CDN reference, it works. Any idea what is wrong? In Chrome, there's no error but I get the same visual output (no bootstrap).app.UseStaticFiles() middleware. Now everything is working.
The files are not in the js folder. Try the following locations for the files:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
