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 9
and 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 5
but 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?
Top comments (3)
I tend to like using Grid and Flex rather than frameworks. I used to use Zurb Foundation, but found myself overriding the elements and css classes (or at least portions of them) more often than I felt was reasonable. I do use Grid and Flex within the same project often as they have different strengths for doing different things.
Over time, I felt that using the built-in CSS3 tools just gave me more freedom. I didn't really have to remember all of the class names for foundation (is it small-column 3, small-3 column, or small-3 cell....) and could focus more on the design my wife has given me (she's the UI/UX designer for our consultancy) than bouncing back and forth between my project and the docs for a given framework.
That is just me though. Personally, the less I can change gears, the better. The time savings of writing 20-30 lines fewer of CSS and HTML usually gets offset by me being "thrown out of a groove" when laying things out. I totally agree though, each have their strengths. For me, I'd rather use the languages built-in, standard lib stuff than reach for an external framework. Usually because if I can build something in straight-up CSS, or Vanilla JS, or Python's standard library, I can better understand what's happening under the hood if and when I need a dependency. Just works better for how I personally approach problem solving.
I think we no longer need to use bootstrap grid but we probably need to use other predefined classes of bootstrap.
Appreciate the article man thank you for taking the time, definitely had all the info I'd been needing.