How to Set Up Blazorise with Bootstrap 5

by | Sep 18, 2024 | Programming

Blazorise is an innovative component library designed for Blazor, allowing you to build beautiful user interfaces without getting tangled in CSS frameworks. In this guide, we will walk you through the process of setting up Blazorise with Bootstrap 5 and FontAwesome icons. Let’s dive right in!

Prerequisites

Before we get started, ensure that you have the latest version of Visual Studio and .NET installed. You can find more information about downloading them on the official Blazor site.

Installation Steps

Follow these simple steps to set up Blazorise:

  1. Install NuGet packages:

    Open your terminal and run the following commands to install the necessary packages:

    dotnet add package Blazorise.Bootstrap5
dotnet add package Blazorise.Icons.FontAwesome
  2. Add Source Files:

    Next, you need to include the Bootstrap and FontAwesome CSS files. Add the following lines to your index.html (Blazor WebAssembly) or _Host.cshtml (Blazor Server), or App.razor (.NET 8) in the head section:

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
<link href="_content/Blazorise/blazorise.css?v=1.6.1.0" rel="stylesheet">
<link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css?v=1.6.1.0" rel="stylesheet">
  3. Add JavaScript Resources:

    Blazorise dynamically loads needed JavaScript resources when components are required. Ensure that you have configured the app to use static files by including app.UseStaticFiles(); in your application settings.

  4. Add Usings:

    In your main _Imports.razor file, add the following line:

    @using Blazorise
  5. Add Registrations:

    And finally, add the following lines to the relevant sections of Program.cs:

    using Blazorise;
using Blazorise.Bootstrap5;
using Blazorise.Icons.FontAwesome;

builder.Services
    .AddBlazorise()
    .AddBootstrap5Providers()
    .AddFontAwesomeIcons();

Creating a Simple Counter Component

Now that you have set up Blazorise, let’s create a simple counter component to see it in action. Here’s a small piece of code that you can use:

@page "/counter"
<Heading Size="HeadingSize.Is1">Counter</Heading>
<Paragraph>Current count: @currentCount</Paragraph>
<Button Color="Color.Primary" Clicked="IncrementCount">Click me</Button>

@code {
    int currentCount = 0;

    void IncrementCount() {
        currentCount++;
    }
}

Understanding the Code Analogy

Imagine your application as a restaurant. The Blazor framework serves as the chef (the backend), while Blazorise provides the menu (components) that your customers (users) interact with. Each time a customer orders a dish (interacts with a component), your chef prepares it (the backend processes) and serves it with style (the UI that Blazorise helps design). With the right ingredients (the packages and resources), your restaurant can serve delightful meals (create seamless user experiences). Each plate (component) can be tailored to fit customer preferences using different styles like Bootstrap or FontAwesome, making your restaurant not just functional but also visually appealing!

Troubleshooting Tips

If you run into any issues during setup, here are some troubleshooting ideas:

  • Ensure all dependencies are correctly referenced and loaded.
  • Check if your Visual Studio and .NET versions are up to date.
  • Review the official Blazorise documentation for detailed examples.
  • If you’re having JavaScript loading issues, ensure that your app configuration includes app.UseStaticFiles();.
  • Refer to resolved issues on GitHub: #3122 and #3150.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Blazorise offers a productive way to design applications without being tied to specific CSS frameworks, empowering developers to enjoy a seamless development experience. By utilizing Bootstrap and FontAwesome, you can easily enhance your project’s UI.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

×