You can look at the source of Bootstrap to see how they accomplished certain things if you'd like, but if you're doing anything more than prototyping (and even then), I feel there is very little benefit to using Bootstrap these days.
Once I was told to ignore Bootstrap and just create my css myself (using Sass or CSS Modules) I find I'm making the same recommendations to others. It doesn't take long and you'll have a much better idea of what is happening on your page.
Your html and css should end up being much smaller as well.
However, I encourage most folks to just use Bootstrap (or Foundation). They're not hard to learn, handle a lot of browser issues for you, are easily customizable, and are very well documented.
If someone ever tells you that Bootstrap is "bloated" or that they "don't like its design choices", they've probably never seen http://getbootstrap.com/customize/.
As a developer, I strongly prefer picking up projects that just use an established framework. No, it's not hard to go through someone's crappy CSS/JS components, but it's just another thing to think about. Let someone else write the JS for dropdown interactions and just build your app.
Another good project's source code to learn from is Skeleton. (more simple than bootstrap)
CSS version: https://github.com/dhg/Skeleton
Sass version: https://github.com/WhatsNewSaes/Skeleton-Sass
Edit: For more of a tutorial approach, check out http://learn.shayhowe.com/html-css/
So yes, you should learn CSS, at least so you understand how web technologies work, in general. But not learning/using Bootstrap (as the parent recommends), if you think that will make your life easier, seems silly. I recently had to do a couple frontend projects for the first time in said over-a-decade-ago, and I found Bootstrap easy to pick up (it took like a half hour), and made things a lot easier than rolling my own CSS, for very little cost.
To actually answer the OP's question, it depends on what you need to do. If you're starting new projects, just learn BS4. I did that back in February, and it worked out well for me. If you have to deal with some existing projects that use BS3, you'll of course need to learn that. But they're so easy to use, that if you already understand how HTML and CSS work (if you don't, of course that should be your step 1), you don't need to really "learn" it so much as read through the section on the layout model, and start building a page/site/app, looking at the reference docs as you go along when you want to add a dropdown or navbar or something.
I came across this when I was looking to gain a more complete mental model of how CSS layout works, as opposed to to the odd assortment of tricks, approaches, and googling I had been relying thus far.
* Learning CSS is not the first priority of a bootstrapped business. The cost associated with a 100kb of css is much lesser compared to creating a layout and all other styles.
* Learning CSS to create a whole layout from scratch can be a daunting task for the uninitiated.
* The best approach would be to start the project with Bootstrap, create a winning product, and iterate to find the best layout you need. Then in a subsequent release, you can redo the same using css. CSS Flex is very easy once you get the hang of it and you do not need any other css layout framework.
I know CSS pretty well and Bootstrap versions are no longer an important concern to me (I can pick up either just by looking at the docs).
> A: Learn CSS
This is not helpful and does not answer the question.
If you are primarily a back end developer and you just want to quickly throw down a few prototype pages. If you will never really need more than that, just spending a couple of hours learning bootstrap will be a much better use of time than spending a few weeks learning all the intricacies of css.
I spent years fighting with css. It was such a relief when Bootstrap and friends came out and just removed a whole layer of complexity from my occasional forays into the front end.
None of these technologies are all that hard. Like, they are easy enough that I don't understand it as a question...
if you know CSS/ SASS and that stack, they take about an hour to figure out the main points and get rolling. But even if you don;t know hardly any CSS then they still take like a day or so, and the principles are pretty much the same.
And equivalent question is "should I learn Sublime or Notepad++". If you understand what they do, pick one and if it stops being a thing you can use for whatever reason then learn the other, because the difficult part of understanding what id going on with them is conceptually the same between them.
Learning assembly is worthwhile if you're programming in C.
Learning CSS is worthwhile if you're designing websites using Bootstrap.
Perhaps even more importantly though, CSS, JavaScript, and HTML have a longevity that's tremendously longer than any given framework. My understanding of these technologies from 15 years ago remains relevant today, and although there's been a lot of new features added, I can build upon that knowledge to incrementally learn new things. And I'm confident that in another 15 years from now, knowledge of these web technologies that underpin all the frameworks will still be relevant. The same can't be said of Bootstrap 4.
- Learn Javascript before you learn React etc.. - Learn Python before you learn Django etc .. - Learn LANGUAGE before you learn FRAMEWORK
I've been using the version 1, 2 and 3 and I've never felt like I needed to learn it. Usually I just open the doc when I need to use something.
Why can't I just use Bootstrap because I don't feel like designing an app, and Bootstrap is the fastest way to get a consistent layout on web and mobile? What's it got to do with learning at all?
No, it's not. I don't want to start a CSS flame war, but at least for layout / positioning I struggle every single time with CSS, especially on sites with dynamic content. CSS is my least favorite part of the web development stack by far.
I personally find it more work to learn frameworks and deal with the leaky abstractions inherent in them than to work with the browser directly. Especially when I hit a case where I want to do something that the framework authors didn't cater for and I end up having to go down to the browser APIs to implement it anyway.
In the short term, it's a bigger investment to learn the underlying technologies, but in the long term it pays off big time, since you don't end up being stuck with something that sounded great two years ago when you started your project but is no longer maintained.
You're going to be in the dirt eventually anyway...
Also, as others have noted, the large frameworks tend to be ... well ... large. That can definitely drag down performance if you're forcing a bunch of CSS into a browser that isn't actually needed by the site.
I've been using Bootstrap 4, since it's already stable and will come out in a few months anyway, so I won't have to upgrade anytime soon.
If you use libraries that depend on Bootstrap, you might want to check compatibility. I was using Bootswatch and the developer didn't upgrade the code to Bootstrap 4 until a few weeks ago. Other than that, I see no reason not to use the latest version.
I'm surprised by all the comments saying that you don't have to learn Bootstrap but you can just look up the components every time you need to use them, suggesting you use Skeleton, or that if you use Bootstrap you don't want to learn/know CSS. Nonsense.
Upgrading major bootstrap version means changing class names in whole codebase (like the classes for grid system), changing html code for some components which have been updated, and having to remove other components altogether and go with your own sauce because components were removed.
This has been the case for all previous major bumps, and there is no sign of it being any different this time, so better save a migration and go straight with bs-4.
The other day I was looking at Bootstrap 3 documentation by mistake instead of Bootstrap 4 and it was completely different, with some components missing altogether.
You said "learning", so I'd still suggest learning the actual CSS. Of course, when you become a bit comfortable with it, you'd have already learned Bootstrap.
Here is how I'd for;
- Use Bootstrap 4 or even 3 to learn your CSS. Use it, go through the source codes and learn from there. - Keep doing CSS (feel free to try other frameworks too) and you should be on your way.
The analogy I can find is that quite a lot of people "learned" jQuery. Then, they figured out that it is, well, JavaScript. They got intrigued, went backward and learned JavaScript. Many enterprising developers advance and 'learn' other frameworks too.
I used to be in the camp where my take was, "learn the actual raw CSS and JavaScript - that's the way to learn." But my experience dealing with juniors, and new developers is that not everyone can just learn something. In fact, a lot of people do not know how to learn things the right way. They need to first learn to learn new things.
So, take it easy on yourself, start with something you can start off (and produce something you're proud of) and begin learning real CSS in the process.
Well, my team specialize mostly in fixing projects shoved down by developers using Bootstrap, where the enterprises needed to go to market quickly. Once they reach critical bloat-stage, we go in to clean-up, make the sites 10-30 times faster by removing all of Bootstrap and other frameworks and staying really lean (use a minimal framework or a very low footprint one.) We, sometimes, end up developing the "Bootstraps" for these companies.
Why preaching about learning CSS while he's just asking about Bootstrap 3 vs. Bootstrap 4?
If s/he is already proficient with CSS, s/he might not be asking that question.
I might have extrapolated this thing a bit, haven't I!
But if you're just trying to bang out a small project quickly and have it look nice without needing to muck with CSS too much, then a framework can be very useful. These days I prefer Semantic UI over Bootstrap:
How do mixin-based CSS frameworks require you to put styling in your markup?
All these frameworks are just COPY & PASTE the pre-made code. For example, you wanna button in that style: http://v4-alpha.getbootstrap.com/components/buttons/
Copy that code and paste into your HTML. Whatever v3 or v4 are the same way.
If your learning way is memorizing the code without checking the document each time, then I'd say v3.
Also, what a nightmare would be to look it up every time you need to use a component!
Of course learning it means to learn components by heart, just like you don't look up built-in functions every time when you use a programming language.
Take Bootstrap as an example, I open the following doc: http://v4-alpha.getbootstrap.com/components/alerts/
If I want a Modal, I will check Modal doc (accurately, I jump to CODE PATTERN and copy it, not starting to read doc explanation.) and use it. After few times, you will memorize the basic by heart. (understands the basic, then you can create your snippets or something. Myself, I still open the doc to see the visual examples. Anyway, I coded with a lot of frameworks in different projects at the same time, not just bound to Bootstrap. You need to find your best workflow yourself)
EDITED: "customize things" seems not suitable to the questioner at the moment. If he understands basic CSS, he may not ask this question. :)
Since it's a "major rewrite of almost the entire project"[1], I can't recommend that new Bootstrap users invest any time in Bootstrap 3.
i.e. you will have to learn the new thing at some time in the future so may as well not incur that debt and go straight to the future.
You also burn one of your technology chits. You get just a few as a startup. Selecting all bleeding edge technology could kill you. Would love to know where I read that. :D
Regarding learning BS3 or BS4, I'd opt for BS4. All you have to know what things BS4 provide and use them appropriately. Not to mention, some fairly good CSS knowledge is also a pre-requisite. One of the themes we recently used is startUI (google for it). It's on BS4 and the components were easy to integrate in apps.
Now, learning bootstrap is not too bad. All you need to donis figure out how it defines the layout grid, how it handles margins, padding, and gutters, and how to use different classes to make the site responsive. Should take a couple of days. Ping me if you need help. :)
However, I would recommend to move away from Bootstrap to Material design for example, I feel (after using both) Material design is more well though framework and it also has bindings with Angular (that is if you are building angular apps) through [angular-material](https://material.angularjs.org/latest/). There is also standalone framework [getmdl.io](https://getmdl.io/started)
Then there is a very detail documentation on how to think like [Material design](https://material.google.com/) way by Google . Checkout the components section from the menu, it is really nice they way explain the theory behind why each component the way it is
If you are trying to roll out some new software for a startup or project and you want it to look good and semi unique then I recommend just buying a theme with all the necessary components (dashboard, graphs, whatever) you need. Themes are pretty cheap these days. Usually one of these themes has picked some sort of "foundation" library and you can then learn that.
Basically force yourself to pick by necessity and not what the "future" should be...
Personally, I would be hesitant to go with v4 because of losing support for older IE browsers HOWEVER v4 is built on flexbox, so it should in theory be a little bit more of a sane implementation.
I would do some more research on what are the differences, it seems like with v4, they are making the API a little bit more simpler, but I haven't dived into it yet.
I say this because I personally have dived head first into using a CSS framework without first fully understanding a few key CSS fundamentals. This made front-end work very hacky and involved a lot of trial and error.
Further along the line I've also been burned once or twice by adopting a CSS framework, only to have breaking changes from future updates.
So really it depends on your situation, whatever it may be.
I happen to like Semantic UI a lot, but you can also consider something smaller and less proscriptive than Bootstrap, like Skeleton or UIkit.
If your question was should I use 3 or 4, then my answer would be, depends on your project.
But for learning, the version doesn't make much of a difference as the general principles are the same.
This is doubly true if you don't know CSS in the first place.
You can always switch to BS4. BS3 is not something that's getting obsolete.
