Need advice about which tool to choose?Ask the StackShare community!
Bootstrap vs Material Design for Angular: What are the differences?
What is Bootstrap? Simple and flexible HTML, CSS, and JS for popular UI components and interactions. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
What is Material Design for Angular? Material Design for AngularJS Apps. Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.
Bootstrap and Material Design for Angular can be primarily classified as "Front-End Frameworks" tools.
"Responsiveness" is the primary reason why developers consider Bootstrap over the competitors, whereas "Ui components" was stated as the key factor in picking Material Design for Angular.
Bootstrap and Material Design for Angular are both open source tools. Bootstrap with 134K GitHub stars and 65.8K forks on GitHub appears to be more popular than Material Design for Angular with 16.5K GitHub stars and 3.57K GitHub forks.
Lyft, StackShare, and Vine Labs are some of the popular companies that use Bootstrap, whereas Material Design for Angular is used by Movielala, Bannerman, and inFeedo. Bootstrap has a broader approval, being mentioned in 7047 company stacks & 1101 developers stacks; compared to Material Design for Angular, which is listed in 279 company stacks and 369 developer stacks.
I do prefer to write things from scratch however when it came to wanting to jump-start the frontend, I found that it was taking me a lot longer hence why needing to use something very fast.
Bootstrap was the boom when it came out, I didn't like it, to be honest, set in its way and a pain to over-ride and in addition, you can tell from a distance if you're using boostrap and as everything looks the same.
I came across Tailwind CSS as I wanted more dynamic features, you could say, I've been now doing it for a few days and I love it a lot. I've been practising with the full stack part installed but I an't we wait until I do a new project, and I'll e able to select exactly what I want. Much faster.
I find the Tailwind provides a lot for flexibility in how we approach design for Mojinxo, while still giving me the benefits of a defined framework and centralised configuration. With tailwind we can create something that is very much Mojinxo and not just a carbon copy of every other site using Tailwind, which is what I find tends to be the case with Bootstrap and Bulma.
There is a tradeoff in familairity for users, especially with Bootstrap where users just 'know' how a site will work based on the card display, the common navigation look and feel and the slide-out burger menus.
The icing on the cake is definitely size. Tailwind is just so small, effective and easy to pick up.
Fonts and typography are fun. Material Design is a framework (developed by Google) that basically geeks out on how to assemble your typographical elements together into a design language. If you're into fonts and typography, it's fantastic. It provides a theming engine, reusable components, and can pull different user interfaces together under a common design paradigm. I'd highly recommend looking into Borries Schwesinger's book "The Form Book" if you're going to be working with Material UI or are otherwise new to component design.
https://www.amazon.com/Form-Book-Creating-Printed-Online/dp/0500515085
Pros of Bootstrap
- Responsiveness1.6K
- UI components1.2K
- Consistent945
- Great docs776
- Flexible677
- HTML, CSS, and JS framework466
- Open source410
- Widely used375
- Customizable368
- HTML framework241
- Popular76
- Mobile first75
- Easy setup75
- Great grid system56
- Great community49
- Future compatibility38
- Integration34
- Very powerful foundational front-end framework27
- Standard24
- Javascript plugins23
- Build faster prototypes19
- Preprocessors18
- Grids13
- Clean8
- Good for a person who hates CSS7
- Easy to setup and learn4
- Rapid development4
- Love it4
- Popularity2
- Community2
- Great and easy to make a responsive website2
- Sprzedam opla2
- Powerful grid system, Rapid development, Customization2
- Clean and quick frontend development2
- Easy to use2
- Great customer support2
- The fame1
- Easy setup21
- Painless front end development1
- So clean and simple1
- Numerous components1
- Material-ui1
- Geo1
- Boostrap1
- Pre-Defined components1
- Great and easy1
- It's fast1
- Reactjs1
- Great and easy to use1
- Responsive design1
- Design Agnostic1
- Provide angular wrapper1
- Recognizable1
- Intuitive1
- Love the classes?1
- Felxible, comfortable, user-friendly1
- Frefsd0
Pros of Material Design for Angular
- Ui components114
- Backed by google62
- Free51
- Backed by angular50
- Javascript48
- Open source34
- Responsiveness32
- Easy to learn31
- Quick to develop28
- Customizable20
- Easy to start8
- Powerful8
- Flexible6
- Themes6
- Flexbox Layouts4
- I like its design3
- Great community3
- Great extensions2
- CDK1
- It's the best looking out of the box1
- Seamless integration with AngularJS but lack of docs1
- Consistents1
- Progressive Web Apps - to learn0
Sign up to add or upvote prosMake informed product decisions
Cons of Bootstrap
- Javascript is tied to jquery23
- Every site uses the defaults14
- Too much heavy decoration in default look11
- Grid system break points aren't ideal11
- Verbose styles7
Cons of Material Design for Angular
- No practical examples3