Material Design vs. Bootstrap

I am no stranger to Front-end frameworks, and lately I have had occasion to work with Material Design and Bootstrap. Specifically I have been working with Vuetify which is a Material Design component framework for use with Vue, and the standard 4x version of Bootstrap.

I had more experience previously with Bootstrap than I did with Material Design before this latest round of sites. All of these projects were using Vue.Js. The reason I mention Vue is that this post is biased by the fact that Vuetify is brilliant; it makes working with MD in Vue easy and enjoyable. There is a similar BootstrapVue but it is less effective imho.

Modern Bootstrap

I applaud Bootstrap for finally jettisoning JQuery. There is nothing wrong with Bootstrap. It is modern, fast, full featured and small-ish. I created AIBL0g and and Meme Fight using Bootstrap. I would still choose Bootstap over Tailwind or Bulma If I was going to create a traditional looking website.

But I am really digging Vuetify…

While the knock on Vuetify – that every site looks like a Google site – is fair, the reason is at least partly because Google’s web apps are highly effective. And Progressive Web Apps is where my focus is these days so Material Design and Vuetify are right on time. The component documentation and examples for Vuetify are excellent.

Of course you can make Material Design based sites that look like the furthest thing from a Google web app

Bootstrap

One nice feature of Bootstrap are the wire frame type examples that Bootstrap provides to get you started. There is a similar Material Design page but they all look like Youtube. MD also has some mock apps to learn and draw inspiration from.

Either framework is a solid choice to use whether you are creating a project with Vue, React, Django, or Vanilla HTML and CSS. I’ll be using MD via Vuetify for my next couple of projects but I reserve the right to change my mind 🙂

2 comments

  1. I don’t understand – bootstraps and Material are website templates, or? I am learning to make websites but I don’t know how to use these templates.

    1. Hey Now – they are frameworks. Basically a collection of CSS and JS that you can use in your website. You would make your html template and include links to the Bootstrap css and js file in it.

      The framework you chose will influence your html template. For instance in Bootstrap you’ll prolly want to have a .container div around most everything and use rows and cols to layout your template.

Leave a comment

Your email address will not be published. Required fields are marked *