CSS3 Grids vs. Bootstrap

CSS3 Grids vs. Bootstrap
0

#1

So I started FCC and Codeacademy like 2 or 3 years ago and at the point we learned a bit of HTML and CSS and then went on to learn Bootstrap. Which we were told was used by a crazy amount of legit websites.
So now, FCC is teaching more of the CSS3 and the grid structure which seems exactly like Boostraps basic layout. My question is why? Is the grid structure in CSS3 new? Is it better to use the grid in CSS3 than Bootstrap?

Thanks in advance!
-Naomi


Which one is better to use, a CSS grid or a Bootstrap, for a layout?
#2

I haven’t used bootstrap yet so I’m interested in what experienced people will say. So far, it looks like using CSS grids is way better (i have more control than what I notice newbie Bootstrap users have). But perhaps Bootstrap helps people get up and running quicker so it is equally valuable.


#3

I’ve heard that sometimes Bootstrap doesn’t play nicely with other frameworks, so there could be situations where you can’t use Bootstrap.


#4

CSS Grid has only fairly recently been fully supported by all modern browsers. The most recent version of Bootstrap was re-implemented to use CSS Grid under the covers. Bootstrap provides easy ways to use a grid system but also includes a lot of other stuff. If you want all that other stuff, go for it. If you don’t then using Bootstrap just to control a grid layout introduces both bloat and additional dependencies into your application.


#5

@ArielLeslie thanks. Thats an awesome explanation! :slight_smile:

  • Nao

#6

I think the big distinction here is that Bootstrap is this big CSS library that you can utilize to create simple grids (Plus a ton of other stuff) while CSS Grid is just CSS you can use to layout your page easily with your own styles. In Bootstrap it’s as simple as applying classes to containers and their children. Grid requires more learning to efficiently lay things out.

All that being said, I believe you are way better off investing your time learning Grid. It gives you ALOT more flexibility without using a large library (where you probably don’t need a ton of what comes with it) and it is becoming more popular in development. I personally was using Bootstrap for quick mockups just to get up and running quickly, but now find myself reaching for Grid instead. I did go through a lot of Grid courses, some of which I’ll share below.


https://www.layout.land/
https://gridbyexample.com/


#7

For personal projects it’s a matter of preference. Grid is interesting but is fairly new. Bootstrap 4 actually uses Flexbox but does the work for you where that’s concerned.

When it comes to working for a company though, the framework you end up with is usually dictated by that company. Depending on where the company is you may be able to change that but it’s unlikely. You could end up with neither getting stuck with foundation or even a framework that the company built themselves (which is how Bootstrap started).

Grids and Flex are basic CSS. You’ll be a better dev for knowing them because you’ll have the foundation to do more. Knowing boostrap is just icing on the cake, and you can do more faster because you want have to start from scratch. Sure devs can get lazy and use out of the box bootstrap but you can push it much farther.

So like anything: learn the foundations, and you can adapt faster as your tools adapt. Frame works save time and sanity, so learning them is always a bonus.


#8

Very, very well said. If anything, I am learning that coding is about understanding the foundation and how elements connect. As tempting as it is to rely on a pre packagers builder there is simply too much chance they will leave you up the river.