Free Bootstrap 5.3 components for ASP.NET Blazor.
Havit.Blazor components have the following requirements:
net8.0
and net6.0
multitargeting)To incorporate the Havit.Blazor.Components.Web.Bootstrap package into your project, you can use the NuGet Package Manager or execute the following command:
dotnet add package Havit.Blazor.Components.Web.Bootstrap
This package should be added to the project where the components will be utilized, typically in the user interface layer. For instance, in Visual Studio Blazor templates, this would be YourApp.Client
.
To ensure proper styling and functionality, add references to CSS and JavaScript in your project.
Insert the following line into the <head>
section of your HTML file. The specific file to modify depends on your project's configuration. This could be App.razor
, index.html
, or _Host.cshtml
/_Layout.cshtml
:
<!-- Standard Bootstrap CSS from CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 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" />
site.css
and completely delete the bootstrap.min.css
reference from either App.razor
, index.html
or _Host.cshtml
/_Layout.cshtml
.
If you prefer to utilize our custom Bootstrap theme, which is used in this documentation and our demos, substitute the first link
with the following:
<!-- Custom themed Bootstrap CSS build -->
<link href="_content/Havit.Blazor.Components.Web.Bootstrap/bootstrap.css" rel="stylesheet" />
Similarly, you can reference your custom Bootstrap build or any other Bootstrap theme in the same manner.
In the same HTML file, add the following line at the end of the <body>
section. This includes the Bootstrap JavaScript Bundle with Popper:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
If your Blazor app is hosted using an ASP.NET Core, take advantage of our HxSetup helper methods instead. These methods automatically emit the <link />
and <script />
tags and handle versioning for you.
For Blazor Web App (.NET 8 and above), put the following in App.razor
.
<head>
...
<!-- Bootstrap CSS (you can set the Bootstrap flavor with a parameter) -->
@((MarkupString)HxSetup.RenderBootstrapCssReference())
<!-- 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" />
...
</head>
<body>
...
<!-- JavaScript Bundle with Popper -->
@((MarkupString)HxSetup.RenderBootstrapJavaScriptReference())
</body>
For Razor Page (.NET 7 and below), put the following into _Host.cshtml
or _Layout.cshtml
.
<head>
...
<!-- Bootstrap CSS (you can set the Bootstrap flavor with a parameter) -->
@Html.Raw(HxSetup.RenderBootstrapCssReference())
<!-- 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" />
...
</head>
<body>
...
<!-- JavaScript Bundle with Popper -->
@Html.Raw(HxSetup.RenderBootstrapJavaScriptReference())
</body>
Add the following code to your _Imports.razor
file:
@using Havit.Blazor.Components.Web
@using Havit.Blazor.Components.Web.Bootstrap
Add the following line of code to your services registration, typically found in the Program.cs
file of your Blazor client project:
builder.Services.AddHxServices();
For projects that originated from earlier Blazor templates, these service registrations may be found in the Startup.cs
file,
specifically within the ConfigureServices()
method. Note that in this case, you will not use the builder
;
instead, register the services directly to the services
collection.
[OPTIONAL] Some components require a specific project setup to function correctly.
This typically involves registering a service and adding a host component to App.razor
or a MainLayout.razor
component.
For detailed instructions, please refer to the documentation of the respective components:
You are now all set to utilize the full range of components in your Razor files. These components are prefixed with Hx
. Rely on IntelliSense to guide you through their usage.
<HxIcon Icon="@BootstrapIcon.HandThumbsUp" CssClass="display-3" />