DEV Community

Cover image for 4 Great Bootstrap Alternatives
Milecia
Milecia

Posted on

4 Great Bootstrap Alternatives

When Bootstrap was released, the web development community went crazy for it. It made creating a responsive front-end so easy that almost everyone adopted it at some point. Now if you look around the internet, you'll notice that a lot of the websites look really similar. It feels like Bootstrap became the template for the internet and it's understandable.

It could take a team of designers a year or two to make something comparable to Bootstrap and many companies don't won't to spend the time or resources on reinventing the wheel. You don't have to worry about that anymore because there are so many great alternatives to Bootstrap. The best part is that some of them don't even need jQuery! Here's a few of the other CSS frameworks I've tinkered with.

Bulma.css

This is my favorite at the moment. It doesn’t need jQuery, it has a good amount of pre-built components, and you can customize it quite a bit with mixins and variables. You'll have to do a little more work with your forms because this is pure CSS so keep that in mind. At most, it'll take you about ten minutes to figure out how this framework works. Plus it's called Bulma. Any other DBZ nerds out there?

Materialize

A lot of the clients I've worked with had projects with this framework. It gives your project more of an industrial feel. Most of the apps I've used it on handled things like single page scheduling or warehouse management. It's a little tricky until you get used to it, but the documentation on it is pretty good. Similar to Bootstrap, you have to watch out for any jQuery issues.

CardinalCSS

If you need something to just give you a base mobile-first layout, this is perfect. CardinalCSS doesn't load the framework down with a lot of pre-built design elements so it's really up to you or your design team to bring the page to life. This is more like a skeleton for responsiveness. It takes out the complicated part of making a mobile-responsive grid without adding a bunch of styles you have to work around.

Foundation

Right now, this is probably the strongest contender with Bootstrap. There are courses and certifications to make you an official Foundation developer. A lot of big companies, like Amazon and Mozilla, are already using it in production. It's another framework that uses some kind of JavaScript to get certain elements to work, but it has plenty of documentation for you to peruse.

These are just a few of the alternatives to Bootstrap out there. They give you a bit more fine tuning than Bootstrap because they are more lightweight. Using a different framework will also give you a chance to make your website stand out in the sea of Bootstrap. Try one of these out and let me know what you think.

Do you know of some other Bootstrap alternatives? There are so many out there that it's hard to decide which ones are the best.


Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding

Discussion (18)

Collapse
gayanhewa profile image
Gayan Hewa • Edited on

Tailwindcss , is a good choice too. I am looking at moving bootstrap 4 to tailwind because for css noob backend devs like me, its easy to understand

Collapse
alyatek profile image
alyatek

Completly agree. I've already moved fully to it. Any project I start, is now, with tailwind. The customization is so easy.
It's something about putting it in an object of arrays that feels so much cleaner than creating the classes in CSS it self.

Collapse
jeromedeleon profile image
Jerome De Leon

I was about to suggest this one haha. You're right. I think TailwindCSS is really a great choice when you want to build a customizable component without providing a baseline component like Bootstrap.

Collapse
daviddalbusco profile image
David Dal Busco

Depends on the requirements I would say, but if you just need a grid system and some styles for a relative simple website knowndays none, no UI library, is an alternative too. I went that path with my website for example.

Otherwise, now that it is developed with Web Components and therefore compatible with any apps (with or without framework), Ionic is an alternative too

Collapse
cjbrooks12 profile image
Casey Brooks

Milligram CSS is fairly old now (last release in 2017), but it was a game-changer for me and is still one of the first things I reach for.

It's very tiny and minimalist (only 2kb gzipped), and generally "just works" without needing to add classes to everything. And its grid is nearly the same as Bulma, so when you start to need a bit more power it's not too difficult to transition to Bulma.

Collapse
eberfreitas profile image
Éber Freitas Dias • Edited on

I discovered Milligram because of the Phoenix Framework that uses it for its basic theme. It is really very elegant.

Collapse
keinchy profile image
Frederick Jaime

i am willing to try anything that does not have jquery as a dependency.

Collapse
fiorin profile image
Fior.in

Its not a big-player alternative but a few years ago i was unsatisfied with Bootstrap lack of basic things and made an own alternative. Have a grid system and a bunch of useful classes. Its non-conflictant with Bootstrap 3, and have a few similarities covered with the 4 one.
There's no support at flex grid, pre-processor or custom form components, but yet is nice for little-medium projects. Currently is used on some big private projects too.
If anyone could share some thoughts about: github.com/fiorin/ptocss

Collapse
therealkevinard profile image
Kevin Ard

More often than not, full-on frameworks come in to provide responsive grids and maybe a few UI components.

For that, bourbon/neat/bitters is solid. Much lighter, and always built from (modular) source makes them very customizable.

Collapse
jazzglobal profile image
Christopher Gambrell

Thanks for the fast read. I've actually used Bulma and Materialize more than Bootstrap! If only people were as crazy about CSS frameworks as they are JavaScript frameworks!

Collapse
travisboss profile image
Travis

At work I do not get a lot of choices, but personally I use Bulma, it is simple to understand and has solid docs. I mainly create Vue projects when I have a choice and Bulma goes well with Vue.

Collapse
ameliaruzek profile image
Amelia Ruzek

UIKit is great too

Collapse
realtoughcandy profile image
RealToughCandy.io

Nice list! Skeleton is great if you need something lightweight.

Collapse
nexopos profile image
NexoPOS Solutions

Tailwind CSS could be an awesome candidate... Specially since it helps you creating UI interfaces without writing any CSS code (or almost).

Collapse
ucavalcante profile image
Ulisses Cavalcante

Recently I discover semantic-hi I'm not have use that yet, but I try when I can.

Collapse
imjituchauhan profile image
Jitu Chauhan • Edited on

Thank you for sharing this list, Also I m working on Geeks Bootstrap UI.

thank you

Collapse
eddievon2 profile image
eddie von

Today, mobile responsiveness is like a salt in the meal. It is necessary! Thanks for sharing these sources. Worth reading this post.

restartreality