13

I am planning to build a React app using Bootstrap-4 and reactstrap (for the React Bootstrap 4 components) but I would also like to incorporate Google's material design into my app which reactstrap does not provide. My question is: could I use Material-UI with Bootstrap 4 instead of reactstrap? This way I would get the React components and also the material design.

Update (26/05/2017): Material-UI will soon be releasing their own grid system built with Flexbox.

Chris
  • 816
  • 4
  • 11
  • 23
  • 3
    Material-UI and Bootstrap 4 are two different thing, they won't work together. – Thanh Nguyen Jan 20 '17 at 04:48
  • UI libraries like Material-UI and reactstrap are heavy dependencies, having even one is enough to increase your app size substantially. Its generally better to evaluate features offered in both against your requirements and then decide and stick with one library. You get React components in both library so not very clear on your question there... Note that you can still get material themes for Bootstrap 4 to work with reactstrap. Examples are http://daemonite.github.io/material/ and http://fezvrasta.github.io/bootstrap-material-design. These are mostly css alterations. – hazardous Jan 20 '17 at 05:31
  • 2
    I was looking for a library containing React Bootstrap 4 components that also incorporated Google's material design and your comment "you can still get material themes for Bootstrap 4 to work with reactstrap" cleared things up for me. Thank you – Chris Jan 20 '17 at 09:19
  • 1
    Not highly recommended but yes. You can use them both. Ex: You can use Material-UI for the components and Bootstrap for the grid layout – Ray Jan 20 '17 at 09:33
  • @Raymond I've decided to use reactstrap for the components and a Material Design theme that works with Bootstrap 4 – Chris Jan 21 '17 at 01:00
  • @Chris I'd be interested to hear what theme you've chosen and how it's working out, any gotchas, etc... Thx! – Jeff Kilbride Jan 23 '17 at 20:06
  • @Jeff Kilbride At a glance both of these themes look good: [daemonite.github.io/material](http://daemonite.github.io/material) and [fezvrasta.github.io/bootstrap-material-design](http://fezvrasta.github.io/bootstrap-material-design). Since Bootstrap 4 is still in Alpha I have not started any development. I think Bootstrap 4 needs to have a stable release out before I start using it. I already made the mistake of using Bootstrap 4 when it was in Alpha-3 and it's dramatically changed since then. – Chris Jan 24 '17 at 01:19
  • Best practice is to stick to one as they have many overlapping features. – DeletedComment Jul 30 '17 at 04:31
  • 1
    First, this is a good question. Second, the answer is YES. It is possible and it works very well. You can for example use icons from material ui and form controls from bootstrap (I find material form controls hard to align as you want them). – ACV Apr 28 '20 at 22:32

0 Answers0