How to setup bootstrap 5 to Blazor Client project

1
votes

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

1
blazor-webassemblybootstrap-5
You can see tutorial : youtube.com/watch?v=9b4hYVNCFK4&ab_channel=KishorTiwari – Kayes Fahim

1 Answers

0
votes

Using an out-of-the-box Server or WASM install:

  1. Download the Bootstrap 5 files from https://getbootstrap.com/docs/5.0/getting-started/download/
  2. Replace bootstrap.min.css and bootstrap.min.css.map in wwwroot/css/bootstrap with the copies in the zip file in /bootstrap-5.0.2/dist/css/

That's it. As far as I can see there's only one small css change in Navmenu.razor

Line 1 replace pl-4 with ps-4 - left is now start [s] right is now end [e].

<div class="top-row ps-4 navbar navbar-dark">

Note this continues to use the OpenIconic icons as defined in the site.css.