responsive designweb design

Material Design for Bootstrap

After a long search, I’ve finally found two good libraries bringing the design language of Material Design to Bootstrap. Actually, I’ve seen similar attempts before. Just think of the Paper theme bundled with BootsFaces. It’s not bad, but I wasn’t too excited when I saw it. I didn’t run a comprehensive test yet, but at first glance, the libraries I present today match my idea of Material Design better. Please take that with a grain of salt: beauty lies in the eye of the beholder, so that’s just my personal opinion.

But wait – shouldn’t it be Material Design versus Bootstrap?

Most of the time I use the terms “Bootstrap” and “Material Design” as opposites. Bootstrap was the first approach to responsive design I got aware of. Later, Ionic was created because Bootstrap didn’t pursue it’s own slogan “mobile first” rigorously enough. Before Ionic, Bootstrap applications still had an air of web pages on your cell phone. They didn’t precisely match the design language of all the other apps on your smartphone.

In 2014, Google developed Material Design as the design language of the Android operating system, making it a de-facto standard on smartphones. When I talk about Material Design, I refer to the flat design looking boring until you discover the unobtrusive but clever animations. Because that’s the core idea of Material Design: every component should remind us of a real-world component. So when you hit a button, you see a bump below the mouse pointer or your finger. Even better, it’s animated, just the way a rubber button might respond in real life.

So, both Bootstrap and Material Design are design languages. Both of them have implementations that can be fleshed out one way or another. In other words, both design languages look differently if you’re applying a different theme. Bootstrap, in particular, offers a default theme, but there are countless other themes allowing you to modify the appearance of your website.

Material Design as a Bootstrap theme

So there’s that nagging idea: can we convert a Bootstrap application to Material Design by applying a different theme? The three libraries I’m presenting today give different answers:

  • The paper theme of Bootswatch resembles Material Design a lot, but as I already mentioned, it didn’t convince me. On the other hand, you can put it positively. Paper is a simple, unadorned, no-nonsense implementation of Material Design. It’s a good choice if you’re looking for a theme you can use in an enterprise environment. Mind you, the playful appearance that’s a big plus in a webshop quickly gets on the nerves of the people using it all day long.
  • The Bootstrap theme of Fezvrasta convinced me at first sight. As far as I can see, it’s simply a theme. In other words: it doesn’t require extra HTML code to support Material Design. I ran a couple of quick tests, and I read a lot of documentation, and I’m impressed. This theme does the trick. As a programmer, you don’t have to learn much about Material Design. Just apply the theme and you’re done.
  • The third library is MD Bootstrap.

    MD Bootstrap comes in two variants: the free version and the premium version. The free version is great to evaluate the library, but it misses some basic features, such as the checkbox. So I guess everyone writing an application needs the professional version. This version, in turn, comes at a moderate price if you’re a company. I’m not, so I shied away from buying and evaluating it in depth. I only ran a few quick tests of the free version.

Programming model of MD Bootstrap

At least one component of MD Bootstrap requires non-standard HTML code. Input fields need to be wrapped in a <div class="md-form"> instead of a <div class="form-group">. Judging by my cursory evaluation, most of the other components use standard Bootstrap HTML code, but be warned: Adopting MD Bootstrap may be more work than just replacing the CSS files.

On the plus side, deviating from the Bootstrap standard allows for a much deeper support of Material Design. MD Bootstrap also offers many components which don’t belong to standard Bootstrap. So the non-standard HTML markup isn’t necessarily a bad thing. You just have to take it into account when you start using MD Bootstrap. There’s no easy way back.

License

I’m not sure what to think about the license of MD Bootstrap. On the one hand, both the license of the free version and the license of the paid version are fairly liberal. But both licenses have surprising limits. For instance, we aren’t allowed to bundle MD Bootstrap with BootsFaces. I’m pretty sure the vast majority of readers of BeyondJava.net won’t have any trouble with the license, but I recommend to read it thoroughly before adopting the library.

The other two libraries are less problematic. Both Bootstrap theme of Fezvrasta and Bootswatch Paper have been published under a MIT license, which allows you to do almost anything with it (at your own risk).

Angular, React, and Vue.js

MD Bootstrap supports Angular, React.js, and Vue.js out of the box. However, I didn’t evaluate the integration yet, so I can only guess that the integration layer makes the live of the developers easier.

Wrapping it up

There are several interesting options to adopt Material Design even if you don’t want to abandon Bootstrap (or BootsFaces). I’m not sure which one to recommend. It depends on your needs. I reckon you can’t go wrong with the Bootstrap theme of Fezvrasta. On the other hand, spending money on a professional theme may give you a deeper integration of Material Design, including components that aren’t part of Bootstrap. But in most cases, you don’t have to switch to a native Material Design library. That’s always an option, and it’s definitely the best option because trying to simulate Material Design with Bootstrap will always remain a simulation, but it also requires you and your team to learn a lot of new stuff. Adopting Material Design natively doesn’t come for free. So it’s great to see there are decent approach to Material Design with Bootstrap.

2 thoughts on “Material Design for Bootstrap

Leave a Reply

Your email address will not be published.