in JavaScript

Material UI or React Bootstrap?

In most projects you will use a CSS framework and customize its appearance to adapt it to your design. But which is the best CSS framework to build a React app?

To answer that question, we need to ask another question. What are you building?

Let’s have a look into some examples. What is the following screenshot, is it an app or a web?

Slack home page

Slack home page

What about this one, is it an app or a web?

Slack app

Slack app

The first one is a web and the second one is an app. The layouts are different, and they implement different patterns. Therefore, you should choose a framework that fits what you are building.

So to keep things simple we are going to compare the two most popular CSS Frameworks we have to build projects based on React: Material UI and React-Bootstrap.

Let me ask you again, what is the next screenshot, is it a web or an app?

Bootstrap documentation page

Bootstrap documentation page

What about the next one, is it an app or a web?

Material UI documentation page

Material UI documentation page

Again the first one looks like a web and the second one looks more like an app. Bootstrap is more web oriented while Material UI is more app oriented. In other words, if you try to build a typical web layout it’ll be more difficult if you use Material UI, especially if you are used to Bootstrap.

Ok think about this, try to build a layout for an app like Slack using Bootstrap. What are the Bootstrap components that will help you build the layout? Is the grid system useful? How do you implement a menu, master detail page? What about the search result section? Building that type of layout is not easy with Bootstrap.

The next screenshoot is the home page of the Material UI’s website, and it’s built using Material UI. If you look at the source code, you’ll notice (especially if you’re used to Bootstrap) that it’s not simple. The main reason Material UI doesn’t have any grid system. Why? They say it’s not the concern of the framework.

Material UI home page

Material UI home page
Material UI responsive page

Material UI responsive page

Building the Material UI home page with Bootstrap would be easier, because it’s the layout of a “document” that you read top-down with a single scroll page. Of course, you need to configure Bootstrap design to match Material design. I find Bootstrap quite easy to customize, if you are very familiar with it you can even just use its grid system.

Another option is to use another grid system, for instance Flexbox grid. Flexbox grid is quite good, but its grid system is based on the flex display property, which is not supported by 100% of the browsers at this point in time. If you don’t have to support IE it’s a great option.

One CSS framework that I find more advanced is Foundation. If you look at their home page you’ll see that they provide 3 types of Foundation depending on what you are building: Foundation for Sites, for Emails, and for Apps. Unfortunately, Foundation is built on Angular. There are some projects in Github that enable using Foundation in React; however, in my opinion, they are not mature enough to be used.

Foundation home page

Foundation home page

Let’s recap

1. If you are building a React App you can use Material UI.

2. If your React App has a public site (home, landings, etc) you can use Bootstrap (with some customization) or just a grid system like Flexbox grid.

3. If you are comfortable using the flex display property, you can create your own template. For instance, I created this Master/ Detail CSS with a few lines of code.

4. If you are building a React App with different sections with different scrolls, and you are not very familiar with the flex display property, it’ll probably be better to think of a template layout rather than a grid. Unfortunately, as far as I know, there are not many React app templates available to be used in React as in Angular. Can you recommend some CSS frameworks or templates to use in React for building apps? Please share with us.