We earn commission when you buy through affiliate links.
This does not influence our reviews or recommendations.Learn more.
Bootstrap is everywhere, but its not always the right tool for the job.
Here are some great alternatives!
And so when we have to build the next project, we reach for Bootstrap unconsciously.
That said, the popularity doesnt make Bootstrap a good fit for all projects and needs.
In fact, for really lean frontends, loading all theBootstrap CSSand JS can cause major bloat.
Finally, just note that this isnotan anti-Bootstrap post by any means.
I love Bootstrap 4 and use it whenever I can.
And with that, lets have a look at what alternatives we have.
If yes, you could do a lot better withFlexbox Grid.
The Flexbox Grid, as the name suggests, is a grid system based on the CSSFlexboxproperties.
These days the Flexbox Grid is my favorite as I dont want to fight Bootstrap to customize it fully.
LearnFlexbox here, online.
Yes, you read that right.
Allthe modules when bundled together and gzipped are 3.7 KB, although individually they amount to more.
The grid module is just 0.8 KB, while the Base module is 1.0 KB.
So lets say you need just the grid and forms module.
PureCSS has its grid system that specifies how much width a column should take.
So,pure-u-lg-1-4means that this element should take 1/4 or 25% of the available width on large screens.
Widths as multiples of 1/5 are also available.
All in all, PureCSS is a liberating and amazing CSS tool (framework?)
that you could pick and choose from as needed.
Zimit
TheZimitframework is kind of an odd-man-out in this list.
Yes, its a framework for building UIs, but its aimed at particular types of UI: mockups.
There are times when you have to develop the front-end to show the functioning of the product.
At those times, you want a framework that:
Zimit checks all these boxes.
Its just 84 KB in size and has a wide range of components to choose from.
Tree view
Breadcrumb
Tabs
There are many more goodies to explore.
Lets look at what the code looks like.
Very similar to Bootstrap, and very intuitive, in my opinion.
Tailwind
TailwindCSS creates utility classes instead of pre-defined component styles.
Bulma
Bulmais an open-source UI framework based on Flexbox.
The ease of configuration is one of the reasons why Bulma is gaining popularity among UI developers.
Bulma suits developers looking for a UI framework that is simple yet powerful.
The modern touch of Bulmas components suits designers who dont want to use generic and old-school Bootstrap designs.
UIkit
UIkitis a lightweight and modular framework for developing powerful web interfaces.
you’re free to use this framework with CSS, Less, and Sass.
To use UIkit in your code, include its CDN link in thesection.
it’s possible for you to as well compile the source code from GitHub.
Once you are done with the installation, you might start using various components.
HTML KickStartoffers an alternative.
However, it does have certain goodies that can appeal to many.
Push-pull
The push/pull feature of Materialize CSS allows you to reorder columns.
This is reminiscent of the new CSS Grid standard, where the layout is different from the element order.
JavaScript goodies
There are quite a few JavaScript features and effects that ship with Materialize.
Tooltips, Toasts (Android-like ephemeral notifications), Parallex, Pushpin, etc., are some of them.
Conclusion
Bootstrap is synonymous with responsive design.
It was Bootstrap that popularized the term mobile-first design and showed how it could be done.
You may also read how toadd Bootstrap to Angular.
