How to integrate Bootstrap 4 in Visual Studio 2017 ASP.NET Core Web Application?

Question

I want to use Bootstrap in an ASP.NET Core Web Application in VS. Actually the NuGet don't support Bootstrap anymore. How can I integrate it now? How can I add the files of bootstrap to my project?

Or can you suggest some other project types in VS where it is easier to use Bootstrap? I dont't know the differences between all the web projects types.

Thanks a lot!

Answer 1

You could use the full .NET Framework instead of .NET Core. I have installed Bootstrap for this type of project many times using Nuget and never had a problem with it.

Another way would be to use the Bootstrap CDN. This is often the prefered method as you do not need to host the source files yourself. Just add the following tags to your views and then it will load the Bootstrap CSS and JavaScript files for you.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Note that you will need to have jquery and popper also included as dependancies. If you don't already have these setup, you can add these via a CDN as well:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

A second option would be to include the references manually. To do this you would want to head over to getbootstrap.com and download the 'Compiled CSS and JS link'. This has the .CSS and .JS files you will want to include. So add these to Visual Studio and then add a link to them in your views. Add them as follows:

For .JS files:

<script src="myscripts.js"></script>

For .CSS files:

<link rel="stylesheet" type="text/css"href="mystyle.css">