Bootstrap Vs. CSS Grid

If you ask any front-end developer which is better, Bootstrap or CSS Grid; the answer you’ll receive is “it depends.” I’d like to give some unbiased context to the debate. I learned CSS Grid and Bootstrap 4 at roughly the same time and have project using both frameworks.

Bootstrap requires more html & less css

Bootstrap is div & class heavy. Meaning to render a header, aside, main-content and footer to the page; requires about 9and depending how you want these positioned and styled could require 12-15 pre-built classes plus your own classes & Id’s. Leaving the only benefit here to be writing less css.

CSS Grid will use your semantic html which in this example would be 5but you would have to write extra CSS for each html elelment to position and style our blocks.

Responsiveness

Bootstrap includes five predefined classess for building responsive layout which sounds great but gets complex as your breakpoints are determined via html. This means you’ll be adding more and more div classes to make your layout for various screen sizes.

With CSS Grid there is no need to change the HTML. You will only need to add a few different media queries to your stylesheet and define the grid layout for each semantic element of your HTML.

Custom grid layout

Well with Bootstrap you’re pretty much limited to 12 columns which may or may not work for you depending on the design spec you’re working from. There’s also a default 10px padding on right and left which have to overridden. That gets annoying having to do this on every new project.

Using CSS Grid you have full control of the layout. Make a many columns as you want!

Page Load

Although the Bootstrap stylesheet and supporting libraries are only a few kb, they still need to be downloaded which will bloat page load. About 85% of browsers support CSS Grid so there’s no need to download additional stylesheets or scripts.

Conclusion

There are merits and demerits on both sides and I call this battle a draw. Using Bootstrap means writing more HTML while CSS Grid means writing more CSS. Your preference there. Depending on the design spec, Bootstrap may not be an option. For less complex layouts, Bootstrap is a no brainer to up and going fairly quickly. Bare in mind that Bootstrap is more than a grid system; it’s a complete front end toolkit which includes modals, tooltips, popovers, progress bars, etc. all predefined in classes. Using CSS grid will require writing JS/jquery files to achieve the same.

In a perfect world we’d have a package that includes the merits of both. I welcome your comments on your experiences with Bootstrap and CSS grid. What’s your take on this?