Hello developers!

Preface

Bootstrap is an amazing tool, this article isn't indented as a negative idea about Bootstrap. This article does not want to denigrate or diminish the library. It's just an experiment.

This is a WIP so there might be other limitations I've not found during this experiment.

Feel free to collaborate 🐱‍👤

---

In my freelance career, I've found a lot of projects with Bootstrap library (at least about a 80% of the projects I've seen).

The reasons behind its use was different between projects, but I've defined 2 common cases:

1. "We use Bootstrap because we want to prototype fast a web application/website and we need its responsive behaviours".
2. "We use Bootstrap because it helps us with responsive issues, but we don't need its components (only container/row/col classes)".

The first case is good because using a big library like Bootstrap could be a big time saver.

But the second one isn't good in my opinion nowadays, maybe it was 5/6 years ago, but now you don't need to download an entire library to make your applications responsive (thanks to flex and grid layout).

---

I'm teaching to my collaborators how to use flex/grid layout to make their applications responsive, without any library and any third-party code.

If they don't need IE support, I teach them how to use grid layout, and why.
If they need IE support, we make some polyfill or we use flex layout.

But one day I've found this article, which explains why Bootstrap is still better than grid layout for creating layouts.

I think this article is right, sometimes using CSS grids could be a waste of time if you don't really know it or you need to create complex layouts, and it could be not so clear to read.

So, what now? Turn back to Bootstrap for large projects?

No, of course, I love CSS grids and I think they could help me and my customers to create cool layouts without any library.

So I've tried to learn deeply Bootstrap and to replicate its layout and responsive behaviours using CSS grid layout.

Here there is the result:

Basically I've tried to replicate Bootstrap layout using only grid properties.

There are some issues (especially with variable width content), but it seems to work pretty good.

Limitations

Equal width multi-line

Isn't possible with CSS grids and auto flows - you need to split the line.

Aligment

I didn't develop the align-{alignProp} classes, so I don't think they will work.

Conclusions

What do you think about this experiment? Do you have any advice or just some tips to help me converting Bootstrap using css grids?

Let me know!