How to setup bootstrap 5 to Blazor Client project

Question

VS templated project of BlazorWebassembly contents the Bootstrap4. Can anybody to help setup bootstrap 5 to BlazorWebassembly project

Answer 1

Copying files into the project is not the proper way.

Instead, use the built-in mechanisms of Visual Studio.

Right-click on the Blazor project > Add > Client-Side Library...

As provider choose 'unpkg' and search for 'bootstrap: Client-Side Library Dialog

After that step, you can see that the Bootstrap libs are added under the target location. Maybe it is good to delete the old Bootstrap version before.

In the index.html you need to include the bootstrap CSS files and/or the bootstrap script files...

    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

...

    <script src="bootstrap/dist/js/bootstrap.min.js"></script>

Pay attention. For the Bootstrap scripts, you also need the latest version of popper.js. You can include it in the same way as Bootstrap or you reference it directly in the index.html

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js" integrity="sha512-BmM0/BQlqh02wuK5Gz9yrbe7VyIVwOzD1o40yi1IsTjriX/NGF37NyXHfmFzIlMmoSIBXgqDiG1VNU6kB5dBbA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

By the way: In your project, there should be a file named libman.json. In this file, there are all loaded libraries with other version numbers. With a right-click on that file, you can clean or restore your client-side libraries.