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
Top comments (17)
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
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.
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.
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
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
i am willing to try anything that does not have jquery as a dependency.
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.
I discovered Milligram because of the Phoenix Framework that uses it for its basic theme. It is really very elegant.
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.
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!
Tailwind CSS could be an awesome candidate... Specially since it helps you creating UI interfaces without writing any CSS code (or almost).
Nice list! Skeleton is great if you need something lightweight.
Recently I discover semantic-hi I'm not have use that yet, but I try when I can.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.