Reverse Engineering the Bootstrap Grid with Modern CSS

April 2021

Bootstraps grid system is well known throughout the world. 12 columns are quite flexible and you can make your page responsive in no time. However, it has some flaws:

However, you can reverse engineer bootstrap’s grid system with less than 100 lines of scss code!

Here is a prototype:

$breakpoints: (
  "sm": 600px,
  "md": 800px,
  "lg": 1000px

.tb-grid {
  display: grid;
  column-gap: 15px;
  row-gap: 15px;
  grid-template-columns: repeat(12, 1fr);
  > * {
    grid-column-start: span 12;
  @each $breakpoint-name, $breakpoint-value in $breakpoints {
    @media (min-width: #{$breakpoint-value}) {
      @for $i from 1 through 12 {
        .tb-#{$breakpoint-name}-#{$i} {
          grid-column-start: span #{$i};

This idea can be taken a bit further by working with CSS variables to customize things like breakpoints and gutters!

The full code and a translation to css can be found here: tb-grid code

There’s also a demo on Stackblitz available here: tb-grid on Stackblitz


With modern css it is dead simple to reverse engineer bootstrap’s grid system. Not only that, we also managed to eliminate the need for the extra container and have it nicely scoped under the tb- prefix.

Dear Devs: You can help Ukraine🇺🇦. I opted for (a) this message and (b) a geo targeted message to Russians coming to this page. If you have a blog, you could do something similar, or you can link to a donations page. If you don't have one, you could think about launching a page with uncensored news and spread it on Russian forums or even Google Review. Or hack some russian servers. Get creative. #StandWithUkraine 🇺🇦
Dear russians🇷🇺. I am a peace loving person from Switzerland🇨🇭. It is without a doubt in my mind, that your president, Vladimir Putin, has started a war that causes death and suffering for Ukrainians🇺🇦 and Russians🇷🇺. Your media is full of lies. Lies about the casualties, about the intentions, about the "Nazi Regime" in Ukraine. Please help to mobilize your people against your leader. I know it's dangerous for you, but it must be done!