Bootstrap vs Material UI for React?

I have been using both in my projects and sometimes I find the need to use a Material UI component within a bootstrap component and the UI displays as I would expect. I have been advised though not to use this approach. Is there any reason why since both are using the grid and can be flexed?

I tend to be verbose so I'll put the concise answer up top here:

Conclusion:

> Whoever said it was bad to use both might just be expressing their > opinion, in reality saying it's bad to use both really lacks context > in what you're designing. @user3770494 made a very good point- but the > point, while valid and truthy about the build size, it does depend on > the scope of the application. If it's an intraoffice application with > everyone on a fiber network local it'd all be cached in memory > anyways... but (not that you know me) I would not judge you negatively > if you mixed them together-- unless it was for a MAJOR million user > application to run on mobile (an very low devices), desktop, and other > devices around the world requiring real(ish) time updates, and > streaming dynamic content with 10000s of active users at any givin > time 24/7. > > In all truth- if it's not life or death-- I'd say use both- and also > do your own. The experience of understanding more then one thing is > better then just "committing to a single solution" for personal > growth.

---

The rest of this reading is optional - you're welcome :)

I personally have used both in production applications (both together, and independently)... I've also done it all from scratch... (CSS is my least favorite part of job things I do - luckily I have a coworker who is great at it) Here are my thoughts:

Warning: I tend to be verbose.

Disclaimer:

As someone who likes function over form, form is an afterthought that is nit picky for clients to ask about tenuous little changes. I am going to try to leave my opinion on "how each option looks for feels" out of this as much as I can.

Also I'm looking at your question in a current choice I'm making- which is using ReactJS / create-react-app to make "demo" projects for touch screen embeaded systems- so I am going to roll out half a dozen mock programs for demos nothing that really does anytihng exactly (CCscanner, barcode scanner, gps, webcam integration, fun stuff like that). So I'm researching what will be easist for me to just commit to for this "beacuse I'm bored and got a pi3b+board for fun).

Answer:

• If you have the time, dedication and resources, there is really nothing wrong with mixing them together. But you just need to think about the time/cost/benifit of it. DIY to make the end user happy- even if you mix them. Totally yourself is remaking the wheel- but you can always pull in boostrap styles etc.

• The inherent risks is that if you use both- make sure you don't "Mix them" to much- because then you will always have issues with trying to ever do version changes on either one.

• I like a lot of MaterialUIs things, but I honestly dislike how a few things look (style wise by default)- functionally I like it better then bootstrap, but at the same time, I do not like MaterialUIs React programming style (as a purist who hates CSS But knows how important it is- having to use !important ever ever ever ... is big big big nonononononononon) compared to whatever way my coworkers and I use for conventions. Not saying it's better or worse then my own preference- but a few things about it really irk me (even if they are done for good reasons).

• Bootstrap has a lot of choices to use for- I like how it looks better, I like how it plays with ReactJS better- but there is reactstrap vs. react-bootstrap (which is why I found your post trying to figure which one to use for this demo thing I'm doing).

• Most recently (for production projects) I do try to stick just with one but normally I'm making systems that are function over form. So they don't really care that much about the UI elements, it's about how to use it not make it pretty. So I stick with using a single one just to make my job easier- and usally still override styles myself ... if the original styles piss me off. But I do not stick with one because "It's bad form to use both" I just stick with one for that reason mentioned above. I'd actually say if bandwidth is not an issue- it's quality to use both- but only use the parts of them that you actually use.

(I noticed someone once importing full jQuery when the only thing that they used from it was $.ajax (all be it a lot but still) ... I was like... is that not overkill?!) -- So if you use both and want to keep things slim- just make sure on compilation you're only importing what you're using. Pythonically I'm saying- never use import * from module (however you express that in Javascript as a concept - webpack/gulp/whomever should take care of most of that for you). Assuming you're using ES6/7 style Javascript.

I encountered this scenario recently and opted to use both but for specific tasks. With it being a responsive web app Bootstrap made the most sense to use for the layout and Material UI for the widgets (just my personal preference).

You can definitely use both but you should be aware of the following:

• There will be a lot of overlap in offered features unless you take time and effort to manage it by carefully picking elements from each of those libraries. And even then you will face situations where you can't avoid overlap. This basically results in a bigger bundle.
• You will have to maintain theming variables for both systems to have a consistent presentation across your app. Even then, there will be situations like where your table checkboxes look different from your form checkboxes because they are from different libraries.
• You have to learn and understand both of the systems. It means sometimes it'll be harder to find what's causing a certain bug. You'll also be spending more time deciding which library to use for which component.

Overall, it's more work for you to work with two different systems and a higher chance of things looking inconsistent. That said, mixing in things like a grid system with limited theming might not be too bad.

If possible, I highly encourage you to choose one system and stick with it.

Using both will increase your production js size.

Material Ui and bootstrap both provide components with basic styles like buttons so choose one.

You can use bootsrap grid for structure only or even go with flex.