Should you do that if you don't already know how it works?
Form styling in a responsive, consistent, and cross-browser way is actually pretty tricky, even for an experienced front-end developer!
I totally understand the antipathy for using such frameworks, and I suggest that they're ill-suited to larger projects where you have the resources to solve these problems in a better way. But Bootstrap has it's place, and the clue is in the name.
I inherited a project that would advance a lot faster if the original developers had used Bootstrap or another CSS framework.
They also chose to use an obscure JavaScript framework instead of Angular or React, so it's impossible to recruit anyone with experience, and you can't take advantage of the plug-in ecosystems.
This is a tough one. But my general instincts suggest that yes, there are significant benefits to be had from at least getting traction on figuring out how stuff works natively before adopting a framework.
BTW I'm certainly not anti-Bootstrap. It's just that suspect the tipping point in favor of its adoption lies somewhere beyond the threshold of a single form button.
By the way, do you have any suggestions for tutorials that teach someone a mental model for how CSS/HTML layout works? In particular, I'm looking for a mental model that I can apply consistently and which doesn't feel like I'm playing whack-a-mole. So far I've found that with flexbox, but I'm still finding myself in situations where I need to work with existing block/inline/inline-block code.
Not that there aren't important concepts to understand. Just that the quirks and exceptions tend to rise up from the mists, and -- just when you thought you got a handle on some particular area of functionality -- overwhelm the nice, tidy, conceptual aspects.
Which is why it has proved to be by far the hardest programming environment I've ever hard to learn.
Other than that, the hard knock school of life is my primary instructor. There's no "Code Complete" for your stylesheets (at least not one that I've found).
For what it's worth, I'm conflicted on the whitespace. I see as well that it would be nice to have it all on one page, but that the current design uses whitespace to separate items is something I like. But I'm not saying that the way the price display for example is working is perfect and can't be changed.
For the bootstrap and form styling, I don't think that bootstrap is the answer here. I am capable of building reliable enough css, I just do not know what to change. A framework can give guidance, but I do not know one that implements this specific combined form input properly. Might be that I just do not have enough experience with them to know where to look.
Or just spend an hour or so figuring out how basic styling form styling works. If you pull in a framework for every itch you have to scratch (even as "lightweight" and standardized as Bootstrap), without taking the considerably greater time to actually understand the framework actually works -- you'll likely regret it some day.
Usability-wise, the biggest issues I see are:
- even after we select for English, we still get captions in German.
- in the hover help boxes (that appear over the green "Leistung" bars), all the performance metric (?)names are camelcased; presumably because they are fresh out of some database. These should also be proper names, the way they normally appear out in the wild.
- there's lots of wasted space. The entire result set should fit on one page, with no need for scrolling, if at all possible.