Need advice about which tool to choose?Ask the StackShare community!
Material Design for Bootstrap vs Semantic UI: What are the differences?
What is Material Design for Bootstrap? Material Design for Bootstrap. This Bootstrap theme is an easy way to use the new Material Design guidelines by Google in your Bootstrap 3 based application. Just include the theme right after the Bootstrap CSS and include the javascript at the end of your document, everything will be converted to Material Design (paper) style.
What is Semantic UI? A UI Component library implemented using a set of specifications designed around natural language. Semantic empowers designers and developers by creating a shared vocabulary for UI.
Material Design for Bootstrap and Semantic UI can be categorized as "Front-End Frameworks" tools.
Some of the features offered by Material Design for Bootstrap are:
- Input fields (text, numeric, email, etc)
- Textarea
- Buttons (ripple effect working)
On the other hand, Semantic UI provides the following key features:
- Build Responsive Layouts Easier
- Self Explanatory
- Tag ambivalent
"Bootstrap" is the primary reason why developers consider Material Design for Bootstrap over the competitors, whereas "Easy to use and looks elegant" was stated as the key factor in picking Semantic UI.
Material Design for Bootstrap and Semantic UI are both open source tools. Semantic UI with 45.9K GitHub stars and 4.84K forks on GitHub appears to be more popular than Material Design for Bootstrap with 19.9K GitHub stars and 3.31K GitHub forks.
According to the StackShare community, Semantic UI has a broader approval, being mentioned in 77 company stacks & 55 developers stacks; compared to Material Design for Bootstrap, which is listed in 5 company stacks and 6 developer stacks.
Pros of Material Design for Bootstrap
- Bootstrap16
- Light weight6
- Awesome and simple to use6
- Modern Looks4
- Google Material Design4
- Responsive4
- Open Source3
- Great angular compatibility3
Pros of Semantic UI
- Easy to use and looks elegant157
- Variety of components92
- Themes64
- Has out-of-the-box widgets i would actually use61
- Semantic, duh57
- Its the future44
- Open source42
- Very active development37
- Far less complicated structure31
- Gulp28
- Already has more features than bootstrap9
- Just compare it to Bootstrap and you'll be hooked8
- Clean and consistent markup model7
- UI components7
- Responsiveness6
- Because it is semantic :-D4
- Elegant. clean. readable. maintainable4
- Good-Looking4
- Is big and look really great, nothing like this2
- Consistent2
- Great docs2
- Modular and scalable2
- Easy to use1
- Blends with reactjs1
- Jquery1
Sign up to add or upvote prosMake informed product decisions
Cons of Material Design for Bootstrap
- Not free for premo stuff2
Cons of Semantic UI
- Outdated build tool (gulp 3))5
- Poor accessibility support3
- HTML is not semantic (see list component)3
- Javascript is tied to jquery2