DEV Community

loading...
Cover image for Top Bootstrap Alternatives

Top Bootstrap Alternatives

soniarpit profile image CodeSnail ­čÉî Ńâ╗Updated on Ńâ╗3 min read

These days, the number one requirement of any website is to run correctly on all kinds of devices (especially mobiles). For that end, Bootstrap has been one of the most popular front-end frameworks and has been featured in the top list of many developers for designing mobile-friendly websites.

While Bootstrap is undoubtedly amazing at what it does, there are some other frameworks that are equally good and may fit your requirements better.

1. Tailwind CSS

tailwind
Tailwind CSS is a highly-customizable, low-level CSS framework built entirely around the concept of utility classes, which Bootstrap also provides out-of-the-box. With utility classes, you can mix and match CSS properties anywhere without necessarily resorting to inline styles.

2. Bulma

bulma
Bulma came to market around 3 years ago and became instantly popular. It was one of the first CSS frameworks to have implemented a full-fledged flexbox grid. Except this, it has a huge selection of components needed to code any kind of website. Bulma comes with a beautiful range of colors out-of-the-box and it wonÔÇÖt be wrong if we call it the most beautiful framework out there in the market. It can be used directly to get really nice looking websites with very least effort.

The only downside it has as compared to Bootstrap is, it is only a CSS framework, no JavaScript. So you will have to write your own JavaScript or Jquery to toggle your dropdowns or perform other basic interactions of the sort. Overall it is a great alternative to Bootstrap, which is also being updated very frequently.

3. Foundation by Zurb

foundation by zurb
"A Framework for any device, medium, and accessibility." is what they call themselves and they certainly are true. With all the perks of an advanced framework, Foundation is definitely the strongest alternative to Bootstrap. It is being used by some of the biggest organizations in the world for e.g. Adobe, Amazon, HP, eBay etc to quote a few. It included all the necessary components of an application like a responsive grid, buttons, basic typography, and many other UI elements.

Not only this, but they also have ÔÇśFoundation for EmailsÔÇÖ which is a framework to code responsive HTML emails. Hence, whenever you are looking for an alternative to Bootstrap, do give Foundation a try.

4. Pure css

pure css
Pure is a CSS framework developed by YAHOO. It helps you develop faster, beautiful and responsive websites with a minimal footprint (the entire set of module clocks is around 4KB). It uses Normalize.css and provides layout and styling for common UI components. It's like a better and slightly fancier Normalize. It uses the SMACSS architecture to modularize the CSS code, which makes it a modular framework by nature.

It allows the developers to create responsive layouts by using grids, menus, menus, forms, buttons and much more. This small yet useful framework outperforms Bootstrap when it comes to mobile devices.

5. Materialize

materialize
Materialize is a modern responsive front-end framework based on Material Design principles of Google. Material design is a design language created by Google, which combines traditional methods of designs along with innovations and technology. This framework is perfect for the developers who wish to incorporate a touch of Material Design on their website without any complicated code. It offers card design, Sass mixins, drag-out mobile menu, ripple effect animation and much more. The developers of the framework have also provided code examples and detailed documentation to help users new users get started with the framework.

Do you know any others plz let me know :)

also read: Why Web Browsers are Free? How Browsers Make Money?

Discussion (19)

pic
Editor guide
Collapse
jamesncox profile image
James Cox • Edited

For me Mateiral UI and its documentation is my preferred component library!

Collapse
johnmunsch profile image
John Munsch

I tried using Material for a project but ended up not loving it because something I consider fairly basic was missing and that was sizes. I didn't see any classes for adjusting the size of buttons, inputs, or other controls. That's something that is fairly basic for Bootstrap but I did not find in Material.

Collapse
jamesncox profile image
James Cox

I can definitely see that. Material UI actually gives you several ways you can change a component's style. I do agree it's more complex than Bootstrap. But I think that once you learn how to customize components, it looks better than Boostrap. But that's my opinion of course!

Collapse
ma2web profile image
ma2web

Materal ui Buttons has a size property with small, large and medium value

Collapse
juanfrank77 profile image
Juan F Gonzalez

Also worth checking out Tachyons.io, it's an Open Source design system that one can custom to fit the needs.

Collapse
mranyx profile image
MrAnyx

Actually, Tailwind CSS is a little bit more than just a css framework. After prototyping you website using the classes. But, whene everything is finished, you can compile all you project to reduce the number of classes and create reusable classes and, in other words, reusable components.

You should take a look at this video : youtu.be/D6-g6JgiUIs

Collapse
kaos profile image
Kai Oswald

Well, this technically can be done with any CSS, not just tailwind. The class purging is done by PurgeCSS

Collapse
peiche profile image
Paul

Add CodyFrame to the list. They have a ton of pre-built components too.

Collapse
loouislow profile image
Loouis Low

Aww... Nostalgic. A very good tool.

Collapse
nicolasomar profile image
Nicolás Omar González Passerino

An alternative I've using the last months has been Semantic UI, it has a good amount of components with good variations and easy integration with the app.
It is a option to have in mind.

Collapse
quasipickle profile image
Dylan Anderson

Unfortunately it looks like development on Semantic has stopped or stalled. There's a somewhat more active community fork here: github.com/fomantic/Fomantic-UI

Collapse
nicolasomar profile image
Nicolás Omar González Passerino

Thanks Dylan, i will give it a look. Is kind of sad that the project has been without much news lately, but it still has good material to work with

Collapse
huncyrus profile image
huncyrus

In older time I used skeleton and for react - because how easy to use with - material UI.

[tl;dr]
I would like to add a little extra thinking for it: the overhead and the modularity. Tailwind is populer because you can actually really narrow down the structure and size. Most of the people do not like bootstrap or zurb, but when you just using the small parts, what your project really needs, then they could be pretty small also.
[/tl;dr]

Collapse
michaelandreuzza profile image
michael-andreuzza • Edited

I would like to mention that Bulma, has actually one of the worst color options. Is too opinionated.

I tell you this because I have never been able to use them in real projects.

For example, I am using my own color styles on my projects.

I have used Bulma a lot, but I am working with Tailwind now...

github.com/michael-andreuzza/aweso...

Collapse
nickfun profile image
Nick F

I was thinking that PureCSS is not maintained, but looks like they have regrouped and created a 2.0 release this year. Great to see, a few years back I used PureCSS on a small project and it was a great fit. Otherwise, Bootstrap really solves all my needs and I enjoy using it.

Collapse
sabbir2609 profile image
sabbir2609 • Edited

I think HalfMoon is best alternative.

Collapse
loouislow profile image
Loouis Low • Edited

Also add Yogurt on the list, please. A very powerful nano crafting tool for frontend development.

Collapse
rawdog71 profile image
Rainer Sulzbach

I'm basically a backend developer. But for my frontend tries I'm using UIKit. Seems to fit most of my needs. Here it is UIKit

Collapse
felipondio44 profile image
Felix Ramirez

Excellent comparison