Bootstrap vs Foundation vs Materialize

Need advice about which tool to choose?Ask the StackShare community!

Bootstrap

51.9K
11K
+ 1
7.6K
Foundation

1.2K
1K
+ 1
735
Materialize

632
1.1K
+ 1
556
Decisions about Bootstrap, Foundation, and Materialize
Bridget Sarah
Full Stack Developer at Bridget Sarah · | 10 upvotes · 199.6K views

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.

See more
Andre Boyle

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.

See more

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

See more
Pros of Bootstrap
Pros of Foundation
Pros of Materialize
  • 1.6K
    Responsiveness
  • 1.2K
    UI components
  • 945
    Consistent
  • 776
    Great docs
  • 677
    Flexible
  • 466
    HTML, CSS, and JS framework
  • 410
    Open source
  • 375
    Widely used
  • 368
    Customizable
  • 241
    HTML framework
  • 76
    Popular
  • 75
    Mobile first
  • 75
    Easy setup
  • 56
    Great grid system
  • 49
    Great community
  • 38
    Future compatibility
  • 34
    Integration
  • 27
    Very powerful foundational front-end framework
  • 24
    Standard
  • 23
    Javascript plugins
  • 19
    Build faster prototypes
  • 18
    Preprocessors
  • 13
    Grids
  • 8
    Clean
  • 7
    Good for a person who hates CSS
  • 4
    Easy to setup and learn
  • 4
    Rapid development
  • 4
    Love it
  • 2
    Popularity
  • 2
    Community
  • 2
    Great and easy to make a responsive website
  • 2
    Sprzedam opla
  • 2
    Powerful grid system, Rapid development, Customization
  • 2
    Clean and quick frontend development
  • 2
    Easy to use
  • 2
    Great customer support
  • 1
    The fame
  • 1
    Easy setup2
  • 1
    Painless front end development
  • 1
    So clean and simple
  • 1
    Numerous components
  • 1
    Material-ui
  • 1
    Geo
  • 1
    Boostrap
  • 1
    Pre-Defined components
  • 1
    Great and easy
  • 1
    It's fast
  • 1
    Reactjs
  • 1
    Great and easy to use
  • 1
    Responsive design
  • 1
    Design Agnostic
  • 1
    Provide angular wrapper
  • 1
    Recognizable
  • 1
    Intuitive
  • 1
    Love the classes?
  • 1
    Felxible, comfortable, user-friendly
  • 0
    Frefsd
  • 158
    Responsive grid
  • 92
    Mobile first
  • 79
    Open source
  • 75
    Semantic
  • 72
    Customizable
  • 51
    Quick to prototype
  • 50
    Simple ui
  • 45
    Fast
  • 44
    Best practices
  • 39
    Easy setup
  • 6
    Neutral style
  • 6
    HTML, SCSS and JS
  • 5
    Professional
  • 5
    Accessibility support
  • 3
    Xy grid
  • 2
    Every new version is smaller, smarter & more efficient
  • 2
    Sass
  • 1
    Robust
  • 102
    Google material design
  • 74
    Easy to use
  • 74
    Responsive
  • 54
    Modern looks
  • 47
    Open source
  • 42
    Good documentation
  • 37
    Code examples
  • 29
    Extremely light - 29kb
  • 28
    Flexible
  • 15
    Great Support
  • 10
    It looks beautiful
  • 8
    Very nice looking components to quickly build out
  • 7
    Smooth animation
  • 6
    Great Grid System
  • 4
    Great
  • 4
    Ruby gem to integrate in 2 seconds flat
  • 3
    Angular2 Support
  • 2
    MIT Lisence
  • 2
    Friendly api, easy setup, good documentation
  • 2
    Easy setup
  • 1
    React
  • 1
    Grid system
  • 1
    Because of the easy to use and very editable library
  • 1
    Responsivness
  • 1
    Jibberish
  • 1
    Friendly Api
  • 0
    Better class name
  • 0
    Rtl support

Sign up to add or upvote prosMake informed product decisions

Cons of Bootstrap
Cons of Foundation
Cons of Materialize
  • 23
    Javascript is tied to jquery
  • 14
    Every site uses the defaults
  • 11
    Too much heavy decoration in default look
  • 11
    Grid system break points aren't ideal
  • 7
    Verbose styles
  • 4
    Requires jQuery
  • 4
    Awful site
  • 6
    Poor Grid System
  • 5
    Mobile errors

Sign up to add or upvote consMake informed product decisions

What is Bootstrap?

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

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

What is Materialize?

A CSS Framework based on material design.

Need advice about which tool to choose?Ask the StackShare community!

What companies use Bootstrap?
What companies use Foundation?
What companies use Materialize?

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

What tools integrate with Bootstrap?
What tools integrate with Foundation?
What tools integrate with Materialize?
    No integrations found

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

    Blog Posts

    What are some alternatives to Bootstrap, Foundation, and Materialize?
    Semantic UI
    Semantic empowers designers and developers by creating a shared vocabulary for UI.
    jQuery
    jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
    Material
    Express your creativity with Material, an animation and graphics framework for Google's Material Design and Apple's Flat UI in Swift.
    React
    Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
    Material Design
    Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
    See all alternatives
    Interest over time
    News about Materialize
    More news