1. Should I learn Bootstrap?
Short answer:
Yes
Long answer:
Bootstrap is an open-source framework maintained by folks who are really good with CSS, they have taken care of making the framework run smooth and have covered several common design features you may want. It makes designing a lot simpler and you don’t have to worry too much about how your site looks like on different browsers because the framework already takes care of that. It saves you a lot of time.
Generally, you will hear people say that it makes websites look exactly the same. This is not entirely accurate since there are CSS preprocessor versions of Bootstrap (LESS or Sass) and they make it really easy to override the defaults so that your site can look unique. In fact, you might be using websites that implement Bootstrap without you even noticing.
It is also worth noting that responsive design is now part of the Google search algorithm, and Bootstrap 3 is all about making your designs responsive. So unless you would like to take care of styling on all the different screen sizes, I highly recommend that you use Bootstrap.
Basically, with some Sass or LESS and custom CSS, you can easily shape Bootstrap around the edges to make it suit all your visual needs.
Ricardo van Hoepen, 5+ years of web development experience
Here, why you should go for Bootstrap
1. Ease Of Use
Bootstrap provides LESS files for those who are accustomed to CSS preprocessing but if you don’t know it or don’t want to use it, you can have plain CSS files as well. All you need to do is download the files from Bootstrap’s website, unzip them and include them in the head of your HTML files. This gives you the access to the entire framework and you can start using the pre defined bootstrap classes with our markup. Before you start converting your designs to markup it is very important that the designs use the default bootstrap framework grid.
2. Highly Flexible
Bootstrap gives the developers the flexibility to develop. It’s a CSS framework with predefined classes for a layout using its grid system, various CSS components, and Javascript functions. These are all included and the developer has the flexibility and freedom of using only those classes that are needed in the markup. This makes it highly flexible as only those objects that are needed in the markup are used by the developer leaving the rest.
3. Responsive Grid
This is the strongest part of the bootstrap framework. Bootstrap offers a 12 column grid system. The grid system is responsive, that it adjusts itself depending on the device resolution of the client. These grids have further classes that have been defined in sync with the device resolution that they represent. These grids have classes xs, sm, md and lg each representing a device resolution. All the developer needs to do is include these classes while defining the visibility of an element in the markup and hence come up with a responsive website. The responsive grid makes developing responsive websites really easy using bootstrap.
4. Comprehensive List Of Components
Bootstrap has all the components you would require for your website. It includes Drop Down Menus, Navigation Bar, Progress Bar, Alerts, Labels, Badges etc. It comprehensively includes all the components you may require and the developer can easily include them in the markup. This saves a lot of time as the developer would not have to develop these from scratch and worry about the cross browser and cross device compatibility. All that is needed to get them working is to include the correct classes in your markup and things would all into place
5. Leveraging Javascript Libraries
Bootstrap has over a dozen javascript plugin pre-developed for the developers to be used.There are various functions that are most often used in most of the websites that have been included in the javascript libraries of bootstrap. These include Tabs, ScrollSpy, Tooltips, Pop Overs, Buttons, Alerts and lots more. Again using and customizing them is really easy.
6. Frequent Updates
Bootstrap releases more updates than any other framework. The bootstrap development team as soon as encounters any problem, starts working on the solution. With Bootstrap updates released consistently and frequently, you can rest assured that you are working with the latest tools. This also ensures a wider range of cross browser and cross device compatibility.
7.Detailed Documentation And Vast Community
Bootstrap has a very detailed documentation and a vast community supporting it. Even if a developer is new to Bootstrap, the documentation provides a great support in learning it without any hassles. The documentation includes examples and demos which help understanding the concepts and getting accustomed to Bootstrap in a short span of time. Despite such a detailed documentation even if a developer gets stuck somewhere there is a vast community and a lot of forums that help answer questions.
8. Consistency
Bootstrap was developed with an idea to give developers a centralized development code. Bootstrap provides you the end result which is uniform across platforms. You don’t have to worry about compatibility issues with Internet Explorer, Google Chrome or Firefox, it gives you the same performance independent of the platform
Mahesh Gareja, Software Developer, Quora addicted.
2. Do I need to memorize all Bootstrap classes and how to use them in order to be a good front-end developer?
It’s a waste of time if you memorize all Bootstrap classes. It is not recommended. Bootstrap is only a CSS framework that helps you build a responsive website easily. The important thing you must know about a CSS framework is how the grid system works after you have known how CSS works. There are many CSS frameworks out there and web developers usually like to explore tools that help their works. Let’s say after you used Bootstrap, you want to try another CSS frameworks like Foundation, Semantic UI, and PureCSS. Would you mind that you should memorize each of the framework’s classes? Once again, it is a waste of time and a stupid thing.
A CSS framework is built using CSS so the only thing you must know is CSS. If you have known CSS well, you are easy to try as many frameworks as you want. When you are creating a website using a framework, just open your text editor and a browser with 2 tabs. The first tab is the result of your code, and the second tab is the documentation of the framework you use. With that way, you can create the website quickly without sparing your time to memorize the framework CSS classes.
Fast development doesn’t require memorizing but requires how far you understand a certain tool works. If you fall in love with that tool, you might use it frequently. The more frequent you use, more quickly you develop. If you have used some Bootstrap classes for many times, you should remember the name of the classes without actually memorizing them.
Conclusion: You don’t have to memorize all Bootstrap classes. You are not asked to pay to view the documentation.
Billy Halim, Interested in Web Development since 2015
Being really fluent in a particular library like Bootstrap is useful in that many other frameworks will have similar opinions and functionality. Thus, fluency in one will usually help you adapt quickly to others. And knowing an API inside and out definitely helps increase the speed of performance.
That said, I don’t think the most productive goal should be to memorize one particular library like Bootstrap unless that is your main bread and butter. Since your question is framed as “good front-end developer” it would imply a range of knowledge in different potential libraries and being able to adapt. Whether that be Bootstrap, or Semantic UI, or Material Lite, etc. the key will be knowing one well enough that you’d know exactly where and how to reference details of what you need. Or if you suddenly need to use a different one, you understand the general gist of what these kinds of libraries offer so that you can easily target new conceptual points and learn faster.
Note, if anything should be REALLY thorough, HTML and CSS foundations, the core of any library of this type should be the main target including CSS precompilers which are what most of these are built with.
Jin Kuwata, Lecturer at TC, Columbia University: Learning Technology, Design, and Development.
For a good Bootstrap reference, visit Bootstrap 4 Cheatsheet here: bootstrapbay.com/bootstrap4
3. What are the main problems with using Bootstrap?
What are the most common problems when using Bootstrap (front-end development)? What are the limitations of using it? How could those problems be avoided?
A few things:
- New versions have changed a lot. You have to be careful because it is not trivial to update.
- Wide disparity of quality templates. Most people don’t start with Bootstrap from scratch but use a Bootstrap template. These vary in quality widely and introduce lots of bloats to try to include features that you would have thought would have been included.
- Disorganization of third party extensions. There’s no central repo for bootstrap extensions, so they can be hard to find.
Jonathan Jaffe, startup owner www.its-your-internet.com (expert on Web Development)
Hmm, this one is pretty easy for me:
- Code bloat. Bootstrap, despite its name, is huge. The minified version of the default download is 106kb, as of this writing. I start to cringe a little when my own written-from-scratch CSS approaches 60kb. Granted, a proper web app will have a much larger CSS code base than, say, a marketing web site, but if you’re starting with 106kb at the beginning of your project, you’re past the point of CSS obesity.
- Unfamiliarity. I like to know my own codebase. Intimately. I applaud Twitter for sharing theirs, and it’s neat to be able to see how a super-successful startup approaches things, but when there’s a time-crunch and your client, your product manager, or your CEO needs a last-minute change, state, well then, wrestling with someone else’s code is a pain. When I’ve written something myself from scratch, I’m familiar with every single line and am therefore able to navigate, change, and evolve it much more efficiently, and that, in the end, makes me a much more productive front-end dev and designer. This essentially invalidates Bootstrap’s claim of being the “front-end framework for faster and easier web development.” Well, for me, at least.
- Retrofitting to fit your brand. Whenever I’ve attempted to work with Bootstrap in the past, my eyes would glaze over with the amount of work that would need to be done to customize every widget, button, field to fit the design of whatever brand I’m building for. Bootstrap for sure already has its own ‘look’ which I can spot pretty easily as a designer and that is a non-starter for clients who are very picky (and should be) about having their own look and feel.
This all being said, I do feel Bootstrap is great for scenarios where a pre-existing design doesn’t already exist, i.e., you have an idea for a web app that you want to quickly prototype, and you don’t want/need to think through how all the UI components need to look.
Moly Yim, graphic & web design @ trejure.com
A few have said this already but I feel like I should add my points since I’ve been using Bootstrap for most of my projects since it came out.
- Code bloat: Definitely adds a lot of code you probably don’t need. But you can trim things down if you know how to customize it.
- Design Mods: If your design direction doesn’t line up with the Bootstrap look, you really shouldn’t use it. You don’t want to push it too far from what it does unless you really want to branch off and use Bootstrap is the basis for your own heavily customized framework.
- Constraints on client requirements: The client needs to know what they can and can’t do with Bootstrap, otherwise you’ll be in a world of hurt. On the opposite side, they should know the major benefits it brings and what it means for the cost. Most smaller clients will appreciate the fact that they saved thousands in front end work + QA in exchange for not being able to always resize or push a pixel exactly X number of pixels without breaking the design rules.
- Responsive Grids: This is a generic complaint some will make that grid based frameworks are hard to design for. I agree, designing a responsive site is very difficult. It’s more about design rules and guidelines when you go responsive because you can’t really create 3–4 fixed based mock-ups and expect the front end to always work 100%. Instead, you need to think in terms of percents, or guiding principles on spacing and then just hard code/tweak rules when things really break, hopefully isolating a hack solution to one isolated area. This is hard for some to accept as it leaves uncertainty around expectations on UI.
- Bad for learning CSS: Like jQuery, if you rely on bootstrap as your first dip into CSS then you won’t appreciate what problems they are solving. So when you actually have to do your own HTML/CSS, it will probably be wrong in some way.
I love bootstrap, to me, it’s just as important as backend frameworks for getting apps off the ground. Any cash hungry startup will appreciate how fast you can get going with it.
Andre Liem, Laravel, Backbone, Marionette, VueJS
