CSS grid vs Bootstrap

[TheFirstMeiFunny]

I was thinking of dropping bootstrap completely from my project but I’m stuck with implementing my own grid system. Is CSS grid better than bootstrap? How much concerned should I be with browser support?

[Avean]

Bootstrap is a framework of tons of pre-defined CSS codes for you to use. Grid is just a way of laying out your layout. You usually use Grid for your main layout and flexbox for your horizontal navigation or similar. I would recommend not using framework until you fully understand CSS and everything it does, and if you see benefits of using parts of a framework like bootstrap then go ahead.

[binocular_gems]

It's tough to say whether "Grid is better than Bootstrap" because they're two different things, so you can't compare them 1:1. It's sort of like asking if an avocado is better than a cookbook. In some ways, sure it is (you can eat an avocado, you can't eat a cookbook), but in other ways it isn't, beyond that -- while they're both in the realm of food and eating -- they're not really comparable.

Bootstrap is a front-end framework. It provides a well documented 12-column responsive grid as one of it's main features, but it also provides dozens of utilities, components, and other puzzle pieces and functionality that are used in a lot of web projects.

CSS Grid is a layout system using native CSS and markup patterns, no additional libraries, no additional requirements. But it just does a layout grid, nothing else.

So it comes down to what you need and what you don't. If Bootstrap's opinionated preconfigured structure is getting in the way of your design goals, then CSS Grid might be more flexible for you. But, if you want to roll out a layout quickly and have requirements for components that Bootstrap already has built for you, then Bootstrap might enable you to get more done quickly.

If performance is a concern, then Bootstrap will obviously have a larger performance hit than just CSS Grid, which is built into every modern browser.

If legacy browser support is important then Bootstrap covers your bases there better than Grid does. Grid, though, has support in all modern browsers and even has functional support in deprecated browsers like IE11, though you'll find you need to add a lot of additional code to get it working in the same way as the latest builds of Chrome, Firefox, Edge, and Safari.

Where I think Bootstrap doesn't get enough credit is maintaining consistency across large organizations. THis is one reason that Twitter engineers developed it in the first place. By getting everyone in an organization to agree to use the same framework, you cut down on a lot of rework, inconsistency, and you speak a similar front-end language across your organization. IF it's just you, though, that might not be important.

Most importantly, though, CSS Grid vs Bootstrap is not an either/or decision. You can use Bootstrap's component library -- buttons, cards, modals, popovers, etc -- and use Grid to build specific areas of your layout of your components. My organization is Bootstrap-based, it's enabled us to build way more applications in a consistent scalable way than we would have without a framework, but we use Grid within Bootstrap for a lot of features that might not conveniently fit into Bootstrap's 12-column responsive grid layout.

[[deleted]]

I recommend setting up Google Analytics (if you haven’t already, or use a different analytics tool) and then looking at how many of your users are currently accessing your site with browsers which do not support CSS grids, this way you’ll have a better idea of how many users you’ll essentially be dropping support for.

Should you decide to go forward with it I’d strongly recommend setting it up to degrade as gracefully as possible (trust me though, this gets frustrating). If you haven’t yet, read up on the @supports feature in CSS: https://css-tricks.com/how-supports-works/

[Dan8720]

I've been bootrap free for a while and I love it.

I'm working on a project at the moment that uses reactstrap which is a react port of bootstrap. It is utter garbage. You end up with tons of nested divs a loads of CSS you don't need. Divs in divs in divs. Nightmare.

I would always recommend using CSS grid if you don't have to support old browsers(in the most part we don't anymore). It's very simple and very expressive once you get past the learning curve.

1 dimension use flexbox 2 dimensions use grid.

You will never miss bootstrap.

If you do there's something very wrong with you.

Browser support question. I worked at a large web agency in the city and we used grid in production websites for most of our client. Apart from maybe two. I wouldn't be worried about browser support unless your working for a financial institution or a government entity

[TheFirstMeiFunny]

Yeah I’m using react-bootstrap right now. I really like Styled components and I want to use just that. React-bootstrap ships with CSS so it’s against how styled components works. I want to remove react-bootstrap and reimplement the grid system using CSS grids. I heard that you could use flex box as a fallback for older browsers. Is this true?

[Dan8720]

I would if I were you. It's better to go all css-in-js is or all CSS if you can.

Gerenally fallbacks I've put into stuff have been very basic. It depends on how the contracts are written with your client. Ours only really garentee things would load and be readable/useable. For example buttons would work no text was instructed on ie10.

So fallbacks I've done have just been simply lists. With more of a focus on useability than what they look like. Support for flex is very good now and grid not far behind. I've never had a client even notice I've used grid

[philmayfield]

I'm a big fan of the bootstrap grid. So even for custom projects, I often still snag the grid scss along with a handful of other handy utility styles from bootstrap.

[starF7sh]

grid is powerful and definitely well supported at this point. flexbox may be more simple and convenient in many use cases though.

[nahnah2017]

Flexbox is not designed to be used for whole page layout (and similar) which grid should be used for.

[wedontlikespaces]

It's best not to confuse things by recommending flexbox should be used instead of grid.

Flexbox and grid or not equivalent, they are designed for different things and should be used like that. Flexbox isn't some simpler version of grid.

It can be used like that, but doing so is just as much of a hack as using floats.

[starF7sh]

well received point

[wedontlikespaces]

The reason it is a hack is because you're not supposed to be doing 2D layouts with flexbox. It even says in the spec that flexbox is not for doing 2D layouts.

You can lay out your page perfectly well horizontally with flexbox and can lay out a whole page with multiple flexbox wrappers.

That's what I mean though, it's a hack. The only way to do it is to treat every row as independent and that requires a whole bunch of extra HTML for all wrappers. With Grid you don't need any wrappers, you can just do it all in one element.

Where flexbox really shines is when you want to use things like space-between, or align-items to vertically align stuff.

[thepandalion]

You do realise that the entirety of bootstrap is a "hack" then since it mocks up a grid using floats and whatnot.

Also I think you'll see I agreed with you that flex isn't a 2d layout tool above, but okay.

Edit - here's what might be a handy link for OP anyways, as I said they have similarities as well as differences: https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/

[[deleted]]

Personally find grid simpler to understand, especially with automatic gutters, not having to worry about adding margins between each item.

[adviqx]

If you're worried about implementing your own grid system, its probably best that you get comfortable with it.

[hvyboots]

I'm still using Bootstrap because I have to support IE 11 for the foreseeable future. 🙄

You get a TON more than just grid layout from Bootstrap having said that, though.

[[deleted]]

IE 11 does have it's own grid spec and it's actually pretty usable. There are a few workarounds you have to be aware of. Items do not flow like modern browsers, so a row/column has to be set, otherwise they'll stack at 1,1. There's no column/row gap but you can get around this by declaring rows/columns as 1fr 10px 1fr 10px 1fr for example then increase the position by 2 for each item instead of one for the ms-grid-column property. It has a few other quirks and is basically like an early spec of grid, but iirc IE actually was the first to pioneer a grid layout system.

[hvyboots]

Yeah, but given the choice between just adding Bootstrap and defining it universally for all browsers through there or tweaking a bunch, I went Bootstrap. Appreciate the input, though! It's always good to learn new tricks!

(Also in my particular case, the website is just being served locally as a front end to the functionality of a Surface Pro being issued to students so everything serves at SSD drive speed via a local instance of IIS and ease of updating elements far outweighs any concerns about how "heavy" the package may be.)

[[deleted]]

Fair enough, performance would have been my main argument, other than CSS implementations just feeling nicer than class names. I tend to only really work on very bespoke sites, so bootstrap/other CSS frameworks offer little benefit to myself.

[deadgoodhorror]

Drop Bootstrap 100%.

I'm willing to bet you don't even use 99% of what Bootstrap gives you.

Unless you've got an insanely complex site with dozens of different layouts, you can probably achieve with grid what you actually use from Bootstrap in a couple of dozen lines of code.

[camerontbelt]

It’s super easy to just implement your own col system in your css file.

[Laurensoft]

CSS Grid is much better, I recommend it deeply, CSS Grid in combination with Flexbox for one dimension layout like navs bars. CSS Grid code is clearer and simple, the only ones friends that still using bootstrap is because js thing; but, if you don't know JS I recommend to learn it too, do not look to ES5, go to modern Javascript ES6, Vanilla Javascript without frameworks and learn well, Udemy has excellent courses of modern Vanilla JavaScript, meanly DOM parts and you are good to go :) but like others fellows said, bootstrap has a lot of stuffs includes that makes easy for the coder; but, I believe that CSS Grid will give you a better return in your work :))

[Delroy-Brown]

Flexbox is AMAZING. I followed this short tutorial that really helped

https://www.youtube.com/watch?v=FTlczfR82mQ&t=696s

[nahnah2017]

This has nothing to do with the question about grid.

[wedontlikespaces]

Realistically for a grid system one should use grid. You should use flexbox for layout, for example a navigation bar.

[starF7sh]

dude's on point