Bootstrap & Flexbox 2 Different Approaches or complimentary?

Hi from 1 degrees C ice age has returned York UK,

What is the difference please between bootstrap & flexbox? For example if you wanted to design a responsive site can you choose between the two or are they complimentary?

Grazie mille,
David

Hi there Nightwing,

just down the road from you, in Chertsey, it
appears to be 3.85° C. :winky:

As for your question; if you are competent at
CSS then avoid “Bootstrap” like the plague. :eek:

If you are incompetent at CSS, then avoid
“Bootstrap” like the plague and practise CSS
until you are.

If this option does not appeal to you, then avoid
“Bootstrap” like the plague and employ someone
who is competent in CSS and get her/him to code
for you.

The difference is rather similar to that between
chalk and cheese. :wonky:

coothead

6 Likes

Yes, they’re very different things.

Flexbox is a CSS layout method. It is just CSS, no added extras.

Bootstrap is an HTML and CSS framework. Like @coothead it’s not something I find appealing. but it has a lot of adherents.

7 Likes

That may well be true, but the same can be said
about alcohol, nicotine, heroin and cocaine. :rolleyes:

But then, “Fools rush in where angels fear to tread”. :rofl:

coothead

2 Likes

That’s like saying “Whats the difference between bootstrap and display:block” :slight_smile:

‘flex’ is just another ‘display’ property for css like display:table or display: block or display:flex etc. Each will apply a set of rules to the element that they will follow.

The latest bootstrap comes with support for flexbox so bootstrap layouts can be created with flexbox (although it is 10 times harder than using flex alone because you have to learn all the bootstrap rules for flex as well).

I agree with all the comments above about avoiding bootstrap especially if you are the only coder on the site. There are small benefits to using bootstrap if you work in a large team where some of the coders may be experts in areas other than css and bootstrap makes sure that they stick to a certain process (like a style guide).

The grid approach of bootstrap is a flawed approach from the start because no design ever fits neatly into a grid and a design shouldn’t be limited to what fits neatly in little boxes anyway. It’s all about content and how best to display that content and ‘pre-formed’ grids seldom match what you want or need to do.

9 Likes

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. It’s pretty handy for quickly developing a prototype, comes with a whole bunch of nice widgets and utility classes, and holds up pretty well when it comes to developing mobile-first web sites.

Flexbox on the other hand is a CSS3 web layout model. It makes it easier to design flexible responsive layout structure without having to use floats or positioning. If you’re interested in learning more, there is a pretty good free video course offered by Wes Bos.

As to which you should use, I’d probably go with Bootstrap, with the caveat that you should understand what it is doing under the hood. It can be a great way to quickly realize some pretty ambitious layouts in a cross-browser manner. However, if you don’t really understand what you’re doing, you’ll probably end up with an unmaintainable bundle of spaghetti.

3 Likes

Meh! It all comes down to how much you enjoy writing CSS, how much time you have to spend on the project, who your target audience is, which browsers you have to support and a bunch of other factors.

For me it’s the same analogy as jQuery vs vanilla JS. Sure, it’s nicer to be able to do things in vanilla JS, but there are numerous compatibility issues and I’m so much faster when using jQuery.

3 Likes

Hi there Pullo,

at the risk of being accused of cynicism, I must ask you
if you’re being paid to promote “Bootstrap” and “jQuery”. :rofl:

What are these “numerous compatibility issues” that beset
Vanilla js and CSS but not “Bootstrap” and “jQuery” ? :rolleyes:

coothead

1 Like

Hi coothead,

I genuinely can’t tell if you are trolling me, so I’ll assume the questions are genuine.

See for yourself. You can grep the jQuery codebase for their browser workarounds (denoted by “// Support:”).

curl -L https://code.jquery.com/jquery-git2.js | grep -A 5 -n Support:

As for Bootstrap, they support a bunch of browsers, all the way back to IE8 if you really want. Here is a list of the bugs currently impacting them.

For me, this means one less thing to have to think about. I really don’t enjoy testing my CSS on multiple versions of older browsers, and Bootstrap gives me some degree of confidence that things will work.

Of course not, but I often see you knocking various libraries, frameworks and apps very loudly and very vocally for no better reason than you don’t like them. Oftentimes (as is, for example, the case with JSFiddle) you have simply failed to comprehend the use case for said technology. I’m just trying to put the other side of the argument.

8 Likes

Thanks for all the replies, not a lot of love for bootstrap! What spurned me to ask was triggered from working through Sitepoints HTML CSS learning path. One of the elements is bootstrap but it looks like bootstrap is like rolling out a site on Wordpress V rolling out a hand coded site perhaps?

CSS frameworks like Bootstrap, Foundation and Material Design are large part of modern front-end web application development. Its not a smart career decision to simply write them off. If you are trying to learn this stuff to become marketable in this industry it is going to be very difficult to avoid CSS frameworks. Being successful sometimes means embracing things which you might not agree with at first like various CMSs, frameworks, languages, etc. Its small minded to just write things off based on a few peoples opinion on a forum.

Though there are many work places that currently use bootstrap, I don’t think it is going to harm your employment prospects if you choose to ignore it.

With css-grid (another pure css layout engine like flexbox that you definitely need to learn) rapidly gaining browser support, people that rely on Bootstrap to do their layout for them will start getting turned down from jobs a lot more than they used to. People that embrace css-grid and flexbox to do layout will find it much easier to get jobs in the near future.

So forget about bootstrap. Put all your effort into learning css-grid and flexbox. Careful with IE11 though. It has weird grid support and buggy flexbox support.

Yup. If you rely exclusively on Bootstrap for your layouts and can’t make anything work without it, you’re going to have a bad time.

And there we go…

By the time you’ve got your head around IE’s “weird grid support and buggy flexbox support”, and have spent an age testing that everything renders like it should, you (well, me, at least) would have been better off going with a tried and tested solution, like Bootstrap.

As @ZooKeeper says, it’s small-minded to write things off just for the sake of it.

You’re kind of blowing it a bit out of proportion. :confused:

For the most part flexbox is actually really well supported in IE11 and very rarely causes issues for me. The few times it has caused issues for me it’s either been so minor it wasn’t worth worrying about or it’s something so odd and complex that bootstrap wouldn’t have been able to handle anyway.

As for grid, there are just a few things you need to know about grid in IE in order to use it safely:

  1. Use autoprefixer and set the “grid” setting to true

  2. It does not support auto-placement. All grid cells must be placed explicitly.

  3. It does not support grid-gap. You need to create extra rows and columns to create gaps

  4. To span multiple columns/rows You need to use the “span” keyword (e.g. grid-column: 1/span 3; to make a cell span columns 1, 2 & 3)

  5. Use @supports (grid-gap:0){ … } if you want to test for modern grid support and provide a fallback for IE11 or browsers that don’t support grid at all.

That’s all you really need to know about IE’s implementation of grid to avoid unwanted surprises.

As for spending an age testing, it doesn’t take long to open a site in IE11. If you build it while understanding IE’s limitations then it is likely to work perfectly with no further testing needed.

The thing is, would you rather put your efforts into learning an aging framework that is probably going to be dead in a couple of years? or would you rather put your efforts into learning how layout on the web will be done for years and years to come?

2 Likes

Definitely the latter. If it seems that I am advocating the former, then I have not done a very good job of putting my argument across.

All I’m saying is that these libraries/frameworks definitely have a use case and shouldn’t be dismissed out of hand.

4 Likes

look into Bootstrap4, use bootstrap4, but understand css, know what you do,
The B4 is very flexible, it uses flex, and indeed, flex is css, not bootstrap, and not for all browsers.
but then we all use our mobile don’t we.
The <b4 , was messy, hard to overwrite, and no not for me.
>=b4 is just much better

For me Bootstrap’s use case is not wanting to spend much in an original design and so basing your design in Bootstrap. What doesn’t make sense, and I’ve seen this happen before, is first getting an original design and then deciding to use Bootstrap to save in development. Because you’ll spend a lot longer undoing bootstrap to get your desired design and end up anyway with a bloated piece of bad software that you’ll have to throw away.
It is great to get something up and running fast, always as long as you don’t get too demanding.
IMHO using Bootstrap to build an enterprise application with a custom design is bad practice. Not only because of dealing with the code but also because it is probably not the best idea to have your enterprise website look and feel like thousands of other websites made with Bootstrap. You probably want a unique look and feel that makes your brand stand out, at which point is probably best not to use it.

5 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.