How to upgrade bootstrap in a .net core 2 web site

Question

I´m pretty sure this is very easy but I couldn´t figure out how to upgrade bootstrap from 3.3.7 to 4.1.1.

What i did was changing this in the _layout page, according to the version

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

What else is needed.

I also saw in Nuget package manager, but I think that will require more changes, and I don´t know how to do it, keeping control on the versions and the project itself.

UPDATE

I found a bower.json file in wwwroot/lib/bootstrap folder, and I modified it everuwhere 3.3.7 and replace it with 4.1.1, however there is a commit number I don´t know what it is.

{
  "name": "bootstrap",
  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
  "keywords": [
    "css",
    "js",
    "less",
    "mobile-first",
    "responsive",
    "front-end",
    "framework",
    "web"
  ],
  "homepage": "http://getbootstrap.com",
  "license": "MIT",
  "moduleType": "globals",
  "main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ],
  "ignore": [
    "/.*",
    "_config.yml",
    "CNAME",
    "composer.json",
    "CONTRIBUTING.md",
    "docs",
    "js/tests",
    "test-infra"
  ],
  "dependencies": {
    "jquery": "1.9.1 - 3"
  },
  "version": "4.4.1",
  "_release": "4.4.1",
  "_resolution": {
    "type": "version",
    "tag": "v4.1.1",
    "commit": "0b9c4a4007c44201dce9a6cc1a38407005c26c86"
  },
  "_source": "https://github.com/twbs/bootstrap.git",
  "_target": "v4.1.1",
  "_originalSource": "bootstrap",
  "_direct": true
}

this is not working. The layout reference to bootstrap cdn is still pointing to 3.3.7 and the bootstrap files in lib folder were not updated when I save the bower file.

Answer 1

In Visual Studio 2017 15.7 you can use the not yet released LibMan (Library Manager) to get the latest Bootstrap library.

1. Open your web project
2. Go to Tools -> Nuget Package Manager->Nuget Package Manager Console

3. Type

   PM>Install-Package Microsoft.Web.LibraryManager.Build -Version 1.0.113
   

4. Once Library Manager is installed, create a libman.json on the root of your solution

5. Format your libman.json as below

   {
     "version": "1.0",
     "defaultProvider": "cdnjs",
     "defaultDestination": "wwwroot/lib",
     "libraries": [
       {
         "library": "[email protected]",
         "files": [
           "core.js",
           "jquery.js",
           "jquery.min.js",
           "jquery.min.map",
           "jquery.slim.js",
           "jquery.slim.min.js",
           "jquery.slim.min.map" 
         ],
         "destination": "wwwroot/lib/jquery"
       },
       {
         "library": "[email protected]",
         "files": [
           "css/bootstrap-grid.css",
           "css/bootstrap-grid.css.map",
           "css/bootstrap-grid.min.css",
           "css/bootstrap-grid.min.css.map",
           "css/bootstrap-reboot.css",
           "css/bootstrap-reboot.css.map",
           "css/bootstrap-reboot.min.css",
           "css/bootstrap-reboot.min.css.map",
           "css/bootstrap.css",
           "css/bootstrap.css.map",
           "css/bootstrap.min.css",
           "css/bootstrap.min.css.map",
           "js/bootstrap.bundle.js",
           "js/bootstrap.bundle.js.map",
           "js/bootstrap.bundle.min.js",
           "js/bootstrap.bundle.min.js.map",
           "js/bootstrap.js",
           "js/bootstrap.js.map",
           "js/bootstrap.min.js",
           "js/bootstrap.min.js.map" 
         ],
         "destination": "wwwroot/lib/bootstrap"
       }
     ]
   }
   

6. Then rebuild your solution. voila!

Answer 2

While I was tackling this issue I came across this post. I figured I would chime in, in-case some were looking for a decent solution.

The template itself features a 'one-time' inclusion of bootstrap 3.3.7. Unfortunately, while the direction the ASP.NET Core team is in flux, some of the front end features are certainly lacking.

Bower is now depricated https://bower.io/blog/

Some have migrated to Grunt or Gulp or Yarn + Webpack. Also at some point ASP.NET Core included a gulpfile in the project template, but it never made it past RC into the stable version. Setting up your project to use any of the platforms for this is an undertaking and some, like myself are just looking for a band-aid instead of having to learn new platforms, or lean heavily on Node.js (NPM)

So, below is how I tackled this:

1. Install NPM
2. Create an empty project npm init
3. Install dependencies
   • npm install bootstrap
   • npm install font-awesome *note1
   • npm install jquery
   • npm install popper.js
4. Copy the folders from /node_modules/ to /wwwroot/lib/ *note2
5. Change replace the css links and script tags in your your _Layout.cs with the below code.

Note 1: Bootstrap 3.3.7 had glyphicons, if you want icons in your web project, I (and Bootstrap) recommends Font-Awesome. Font-Awesome at the time of writing is 5.1.0. I chose not to use the new version. If you want the latest version, you'll need to use npm install font-awesome-free

Note 2: You do NOT need all these files, but for brevity sake I didn't list the minimum required files. For the most part you only need what is in the <dependency>\dist\ folder.

---

_Layout.cshtml

In the <head> tag

<environment include="Development">
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

<environment exclude="Development">
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
          crossorigin="anonymous"
          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>

Before the </body> tag

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.slim.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>

<environment exclude="Development">
@* Get your own CDN link from 
   https://fontawesome.com/v4.7.0/get-started/
*@
    <script src="SEE ABOVE NOTE"></script>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            asp-fallback-src="~/lib/popper.js/dist/umd/popper.min.js"
            asp-fallback-test="window.Popper" 
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous">
    </script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
            crossorigin="anonymous">
    </script>

    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>