Material UI VS Bootstrap

12.9.21

Since the previous post was about backend tech, PostgreSQL (databases) & Python, I figured the next one can be about frontend. I want to explore and compare two super popular frontend design tools, Material UI and Bootstrap. These two tools are for building what most people associate frontend design with, the actual user interface (UI) with the user experience (UX) in mind. These two tools both help people create user interfaces by providing pre-built elements. Or a little more plainly, you don’t have to code EVERYTHING by hand.

Bootstrap describes itself as the world’s most popular frontend open source toolkit. It is an HTML, CSS, JS framework with pre-built elements. Originally called Twitter Blueprint, Bootstrap was initially created by Twitter to help them build faster with more consistency. In 2011 Twitter open sourced it, changed its name and released it to the public. Keeping with the rise in popularity of React, Bootstrap was rebuilt for React as React-Bootstrap. The components were rebuilt from scratch as true React components cutting out unneeded dependencies such as jQuery. In the last couple years jQuery has been hotly debated and is largely thought to be in pre-obsolescence. Note: you can still use Bootstrap without React, I will just be focusing on React-Bootstrap.

Material-UI (or just MUI) is a React UI library that adheres to Material Design principles. Material Design, originally called Quantum Paper, is a design language developed by Google in 2014. Material Design was developed to deliver intuitive, cross-platform design. The Material Design principles try to bring natural or real world laws to user interface design. Natural or real world laws meaning it takes principles for motion, interaction, animation, navigation, typography, shapes, shadows, colors, etc into account. So, MUI is a React component library with an entire elaborate design theory behind it.

A few years ago mobile devices accounted for about half of all internet traffic. Unsurprisingly, that number has continued to grow to around 70%. With about 3.5 billion smartphones in circulation (there’s less than 8 billion humans on Earth right now), it is estimated that people are spending up to an average of 5 hours a day using their smartphones. It is not unreasonable to assume the recent pandemic has helped boost these statistics but for some people, smartphones are how they access the web. I’m not just talking about third world/developing countries but giant swaths of demographics all over. Over 95% of active Facebook traffic comes from mobile devices now. Do your parents even have a desktop anymore or just tablets? Are you reading this on your phone right now? With these massive numbers come the general dismissal of sites and apps that are not mobile friendly. If somebody has a negative mobile experience, the chances of them recommending or returning to the site or app drops significantly.

It makes sense that both Bootstrap and MUI both take a mobile-first or responsive-design approach. Responsive web design is making sure your site or app renders well on a variety of window and screen sizes. How does Bootstrap and MUI achieve this? With responsive grid systems. They both use a similar 12-grid system that helps elements on a page automatically rearrange and resize. Bootstrap uses rows, columns and containers and MUI uses columns, gutters and margins. Both Bootstrap and MUI also have excellent browser compatibility. Since different browsers render code differently, browser compatibility should always be taken into consideration.

Some key differences between Boostrap and MUI are their dependencies, development speed and customization. Bootstrap is a large framework that comes with a lot of code and scripts. This large framework can be a system hog, dampening page performance and draining batteries. MUI on the other hand uses React components that are independent of each other so you can use only what you want/need. While it is possible to get into the Bootstrap code and weed out components you are not using, it is tedious and time consuming and defeats one of Bootstrap’s big selling points, development speed. Bootstrap is known for creating quickly using reusable code and components. Customization ties into development speed and is probably where Boostrap and MUI diverge the most. While Bootstrap components can be customized they sometimes get criticized for looking a little stock where MUI offers seemingly endless customization. The actual code to customize MUI components can become quite involved.

Who uses which? Bootstrap: Twitter (obviously), Airbnb, Apple Music, Dropbox, Spotify, Lyft. MUI: Amazon, Nasa, all Google products. Which should you choose? Both are completely professional and valid options. It is completely up to you and your project. Or maybe don’t choose at all, it is entirely possible to just use both at the same time. If you are going to mix the two you might want to check out MDB - Material Design for Bootstrap which is a single React library that tries to give you the best of both worlds. Bootstrap and MUI aren’t the only players in town either. Other industry heavies to explore are Chakra UI, Blueprint UI, and Ant Design; all with unique features and use cases.