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

Conclusion

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.

Become a better web developer by staying up to date