Angular Material Design vs Bootstrap

When re-working an existing application I was wondering whether I should continue using Angular Material Design or just switch to Bootstrap. While I have used Bootstrap in the past when working with normal HTML web pages, I never used Material Design. The only experience I had was how the application looked like, and that was horrible. My first reaction was to just start over and use Bootstrap instead of Material Design, but the decision was not that easy as I hoped it would. In this blog post I will compare Material Design and Bootstrap.

My initial choice for Bootstrap came to an early end, as I discovered that the navigation bar was wider, and at the same time has more margins which make the icon way to small. Another obstacle was that using bootstrap would quickly evolve into rewriting all of the application instead of being able to rewrite part by part. So after a quick attempt I gave up on Bootstrap and started using Angular Material Design instead, and doing so has learned me a lot on how they differ.

Lets start with Bootstrap. Bootstrap is just some very complicated and advanced CSS that changes the look and feel of the regular HTML elements. All of this CSS needs to be sent to the browsers, where it has to apply all the rules to the correct elements. Although I never experienced any performance problems with this, but it is easy to imagine that this might be a performance hit. Bootstrap does not come with icons, instead you have to select a library yourself such as Font Awesome. Bootstrap works very will with multiple different libraries so this isn’t really a problem. What is a bigger problem is the look of some element (such as tooltip) that are not that fancy and the alerts that are very invasive.

Material Design on the other hand is designed for Angular. It contains a lot of custom elements that have to be used over regular HTML. Material Design is designed in such a way that you can select what you need to minimise the footprint of your application. While this is very interesting and smaller is definitely better, Material Design is still in beta version. This is very clear when you look at stuff such as documentation, which is often not up-to-date, inconsistent or simply lacking. Also the very small set of components you can choice from is an indication of this. Another weird design choice is that the default colour schemes are not the same for all elements (such as input fields and checkbox). Using the right elements can also be tricky, because of the special Material Design elements which have to be used, but not always. For input elements, you still need to use the HTML element, but just add a directive on it. For a dropdown however, you need the special MdSelect.

Material Design does come with a default icon set, but this is very small and limited. The icons that are available seem to be focussed on mobile applications, and are less appropriate for big web applications. What Material design does offer, is the fancy borders and shadows around many of their elements. While this does make it a lot easier to create an application out of the box with a nice look and feel, I often felt I was limited and couldn’t do what I really wanted. Moreover I often had to fix some bad styling by adding my own CSS rules, and to make things worse sometimes I couldn’t even change the things I wanted to.

Although Material Design is written for Angular, it actually makes testing a component much harder because you have to always include all of the components. And even then all of your tests will complain that there is no theme specified.

In the end it is clear that no framework or library will offer you all the things you need. But choosing one where you can at least work around the limitations you have or extend it is essential. Although the application is now written with Material Design, from this experience I would still recommend and use Bootstrap instead of Material design in the future. Simply because Bootstrap is clearly more mature, contains a more extensive set of components and can be modified more easily. Material design may someday become a much easier to use framework, but it still has a long way to get there.