Free Bootstrap 5 components for ASP.NET Blazor.
Havit.Blazor components have the following requirements:
net5.0
and net6.0
multitargeting)Find the Havit.Blazor.Components.Web.Bootstrap package through NuGet Package Manager or install it with following command:
dotnet add package Havit.Blazor.Components.Web.Bootstrap
Add the following to your HTML head section, it's either index.html
or _Host.cshtml
depending on whether you're running WebAssembly or Server:
<!-- Standard Bootstrap CSS from CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<!-- Default values for additional CSS Variables (+ import Bootstrap Icons) -->
<link href="_content/Havit.Blazor.Components.Web.Bootstrap/defaults.css" rel="stylesheet" />
<!-- Blazor CSS Isolation -->
<link href="Your.Blazor.Project.Assembly.Name.styles.css" rel="stylesheet" />
If you want to use our custom Bootstrap theme (used in this documentation and demos), replace the first link
with:
<!-- Custom themed Bootstrap CSS build -->
<link href="_content/Havit.Blazor.Components.Web.Bootstrap/bootstrap.css" rel="stylesheet" />
You can reference your own or any other Bootstrap build/theme in a same way.
site.css
and remove the bootstrap.min.css
completely from either index.html
or _Host.cshtml
.
At the end of HTML <body>
section of either index.html
or _Host.cshtml
add this:
<!-- Bootstrap JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Add following to your _Imports.razor
file:
@using Havit.Blazor.Components.Web
@using Havit.Blazor.Components.Web.Bootstrap
For Blazor WebAssembly add the following to your Program.Main
:
using Havit.Blazor.Components.Web // <------ ADD THIS LINE
using Havit.Blazor.Components.Web.Bootstrap // <------ ADD THIS LINE
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
// ... shortened for brevity
builder.Services.AddHxServices(); // <------ ADD THIS LINE
await builder.Build().RunAsync();
}
For Blazor Server (or WASM with server pre-rendering) add those registrations to your Startup.cs
file, ConfigureServices()
method.
(You won't use the builder
there, register the services to the services
collection.)
Some of the components need a specific project setup to work. This usually includes adding registering a service and adding a host-component to App.razor
or layout component.
For instructions see documentation of those components:
Now you are ready to use all the components in your razor files. They come with Hx
prefix. IntelliSense will be your friend...
<HxIcon Icon="@BootstrapIcon.HandThumbsUp" CssClass="display-3" />