Blazor Components for Bootstrap
ASP.NET Core Blazor is quite an interesting new piece of technology. If you haven’t looked into Blazor yet, I recommend you to read through this Getting started with ASP.NET Core Blazor article. Also check out my previous article about Blazor, The Anatomy of a Blazor Server Application.
So I honestly think that there’s a huge potential for Blazor. The potential will only grow when Microsoft also ships support for Blazor on WebAssembly. Blazor WebAssembly is at the time of writing (early November 2019) still in preview. It is scheduled to be shipped in May 2020. To learn more about the potential of Blazor, read this excellent article about Blazor scenarios by Daniel Roth.
Update January 2020: The Blazor component library described in this article has been renamed to Blazorade Bootstrap, and relocated to another repository in GitHub. Otherwise it’s still the same as the library described below. Read more about Blazorade Bootstrap in this article.
Integrating Bootstrap with Blazor
I’ve been learning about Blazor quite a lot lately. Instead of just writing dummy demo applications with Blazor for my own benefit, I thought why not try to do some good in the process. So I came up with the idea to write a Razor component library designed for Blazor applications that wraps the components defined in Bootstrap.
I admit that this idea is not a new one. There are similar libraries already out there. But quite frankly, I think most of them fail to leverage the benefits of Razor components to hide the complexity of Bootstrap components. You still have to remember the complexity of Bootstrap markup. Perhaps not the most optimal way of handling things.
Now don’t get me wrong. I’m quite a big fan of Bootstrap, but you have to agree with me that the HTML markup for many of Bootstrap’s components is quite complex. There’s a lot you have to remember to get the components right. For instance, take a look at the markup required by the Card component. If you remember all of that without having to consult the documentation, you probably belong to the very small minority of developers who do that. At least I find myself consulting the Bootstrap documentation all the time. The documentation is excellent, though. That is probably also one reason I consult the documentation so much, because it is so good!
Introducing Blazor Bootstrap
So, to add value to developers wanting to use Bootstrap, I wanted to use the power of Razor components to hide as much as possible of the things you need to remember when working with Bootstrap components and make them more intuitive.
This is how Blazor Bootstrap was born. The source code is available on GitHub. You find the documentation on the associated Wiki.
Blazor Bootstrap aims to make using Bootstrap with Blazor Bootstrap much simpler than without it. This is crucial to make the library useful, and not just another wrapper around something popular, and thinking that it is enough to make it fly.
Blazor Bootstrap Design Principles
One good example of this is the enormous amount of CSS classes defined by Bootstrap. You use these classes to modify the look and feel of a component. For instance, you control margin and padding in Bootstrap by a number of CSS classes that you combine together to create what you want. When you take all the other features that Bootstrap provides you in a similar way, it becomes very hard to remember all combinations available.
Blazor Bootstrap tackles this by defining various parameters on the components that are typed as enum types. These enums define constants representing the various CSS classes in Bootstrap.
Another strategy that Blazor Bootstrap uses is to provide as much as possible of the HTML markup required by Bootstrap automatically from the Razor component. The developer should not be bothered with things that the Razor component already knows, for example the exact syntax that Bootstrap requires. To handle this, Blazor Bootstrap exposes a set of parameters, and uses them to produce the markup. In cases when this is not enough, Blazor Bootstrap components expose template parameters that allow developers to inject any kind of markup in selected places of a components UI.
so, head over to the documentation wiki and see what you think. Also, be sure to clone the repo and have a go yourself.
Work in Progress
The Blazor Bootstrap library is very much work in progress for the moment. so far, I’ve completed only a few components. However, I will spend a big chunk of my spare time the rest of this year working on this library. If you like what you see and read so far, any encouragement is very much appreciated. And please do not hesitate to file your suggestions, questions or other ideas as issues. I will try to consider each and every one of them.
Want to Join?
Have you been looking for an open source project to contribute to, but not yet found one that suits you? Could Blazor Bootstrap be such a project? If you think it could, get in contact with me so we can set up a chat to get things going.
Further Reading
Be sure to check out my article series on building applications with Blazorade Bootstrap.
- Building an Application with Blazorade Bootstrap, Part 1
- Building an Application with Blazorade Bootstrap, Part 2
- Building an Application with Blazorade Bootstrap, Part 3
If you want to learn more about Blazor, the links below may provide you with valuable information.
0 Comments