In this Blazor .NET blog post, we will show how to add Bootstrap to a .NET 9 Blazor application and leverage the most popular CSS framework. Adding Bootstrap to .NET Blazor 9 Web Application can enhance your development experience.
What is Bootstrap?
Bootstrap is a powerful, open-source front-end framework developed by Twitter. It is designed to help developers build responsive, mobile-first web applications effortlessly.
Bootstrap provides a collection of CSS and JavaScript tools that simplify the process of designing web pages.
The framework includes a range of components like:
- Navigation bars
- Buttons
- Forms
- Modals
One of the key advantages of Bootstrap is its grid system, which enables developers to create complex, responsive layouts with ease.
The grid system is based on a 12-column layout that adjusts seamlessly to different screen sizes and devices.
Bootstrap is also highly customizable. Developers adding Bootstrap to .NET Blazor 9 Web Application can modify the framework’s variables and mixins to create a unique design that aligns with their branding requirements.
Blazor 9 Latest Features
Blazor, is a web framework within the .NET ecosystem, continues to evolve, and .NET 9 brings with it a host of exciting new features which are in this link
How to Add Bootstrap to a .NET Blazor 9 Web Application
To add Bootstrap to a .NET 9 Blazor application, start by removing the existing Bootstrap folder found under the wwwroot directory of your project. This ensures that there are no conflicts with multiple versions of Bootstrap when adding Bootstrap to .NET Blazor 9 Web Application.
Delete bootstrap folder
Blazor uses Bootstrap 5.1 by default. First, delete the Bootstrap folder in the wwwroot directory.
Edit App.razor page
Next, edit the App.Razor page, which serves as the root component for your Blazor application.
This page is pivotal in defining the layout and behavior of your Blazor app, setting up routing configurations, injecting services, and establishing global components.
Instead of using the local Bootstrap files, it’s recommended to use the CDN Bootstrap installation for ease of updates and better performance.
Add the Bootstrap to .NET Blazor 9 Web Application will streamline your development process. You can achieve this by modifying your App.Razor file to include the Bootstrap CDN link, facilitating a streamlined and efficient integration of Bootstrap into your Blazor application.
We’ll use the recommended CDN method to install Bootstrap. Replace line 8 and add line 18 in your code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<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 rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["crm.styles.css"]" />
<ImportMap />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
Once the changes are made, we can use Bootstrap CSS classes as shown below.
<h1 class="text-center fw-bolder">Clients</h1>Related articles
Discover more from CPI Consulting Pty Ltd Experts in Cloud, AI and Cybersecurity
Subscribe to get the latest posts sent to your email.