Material Design for Bootstrap vs Semantic UI

Material Design for Bootstrap
Material Design for Bootstrap

47
76
44
Semantic UI
Semantic UI

580
571
576
Add tool

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.

What is 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?

Semantic empowers designers and developers by creating a shared vocabulary for UI.

Want advice about which of these to choose?Ask the StackShare community!

Why do developers choose Material Design for Bootstrap?
Why do developers choose Semantic UI?

Sign up to add, upvote and see more prosMake informed product decisions

What are the cons of using Material Design for Bootstrap?
What are the cons of using Semantic UI?
    Be the first to leave a con
      Be the first to leave a con
      What companies use Material Design for Bootstrap?
      What companies use Semantic UI?

      Sign up to get full access to all the companiesMake informed product decisions

      What tools integrate with Material Design for Bootstrap?
      What tools integrate with Semantic UI?
        No integrations found

        Sign up to get full access to all the tool integrationsMake informed product decisions

        What are some alternatives to Material Design for Bootstrap and Semantic UI?
        Bootstrap
        Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
        Material Design for Angular
        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.
        Animate.css
        It is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
        Foundation
        Foundation is the most advanced responsive front-end framework in the world. You can quickly prototype and build sites or apps that work on any kind of device with Foundation, which includes layout constructs (like a fully responsive grid), elements and best practices.
        Material-UI
        React components for faster and easier web development. Build your own design system, or start with Material Design.
        See all alternatives
        Decisions about Material Design for Bootstrap and Semantic UI
        No stack decisions found
        Interest over time
        Reviews of Material Design for Bootstrap and Semantic UI
        No reviews found
        How developers use Material Design for Bootstrap and Semantic UI
        Avatar of osu! Ripple
        osu! Ripple uses Semantic UISemantic UI

        We use Semantic UI for our frotend. A heavily customised version of it, but still Semantic UI under the hood.

        Avatar of Ralic Lo
        Ralic Lo uses Semantic UISemantic UI

        Used Semantic UI + Angular2 together with Spring or Node/Express for full stack web application development.

        Avatar of Giftstarter
        Giftstarter uses Semantic UISemantic UI

        We haven't yet, but we would like to integrate into our Web App.

        Avatar of Itbid
        Itbid uses Material Design for BootstrapMaterial Design for Bootstrap

        UX intuitiva pensada para usuarios de Android

        Avatar of Eliana Abraham
        Eliana Abraham uses Semantic UISemantic UI

        It's pretty. Used it once for MDST.

        Avatar of Wellzesta
        Wellzesta uses Semantic UISemantic UI

        Grid, widgets, theming.

        How much does Material Design for Bootstrap cost?
        How much does Semantic UI cost?
        Pricing unavailable
        Pricing unavailable
        News about Material Design for Bootstrap
        More news
        News about Semantic UI
        More news