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. 
As for your question; if you are competent at
CSS then avoid âBootstrapâ like the plague. 
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. 
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. 
But then, âFools rush in where angels fear to treadâ. 
coothead
2 Likes
Thatâs like saying âWhats the difference between bootstrap and display:blockâ 
â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â.
What are these ânumerous compatibility issuesâ that beset
Vanilla js and CSS but not âBootstrapâ and âjQueryâ ?
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. 
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:
-
Use autoprefixer and set the âgridâ setting to true
-
It does not support auto-placement. All grid cells must be placed explicitly.
-
It does not support grid-gap. You need to create extra rows and columns to create gaps
-
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)
-
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.