[ad_1]
https://i.ytimg.com/vi/dliD3g5auco/hqdefault.jpg
What are major differences between Bootstrap 3 and Bootstrap 4? This is often part of frontend interview questions that most frontend developers fail to answer it properly. If you are a frontend developer and don’t know what’s going on with the frameworks and libraries that you use regularly, then you lack important information. Libraries and Frameworks won’t get update to just include few more classes and new pretty colors. It has to be more specific than that. And, you may wonder, why are you being asked about Bootstrap 3? Because it is relevant. Why? Because you will still have to work on websites that are using Bootstrap version 3 at your job. And also interviews are not about testing what can you do. It’s about how much you pay attention to details. And how much grip do you have on your subject.
Bootstrap 4 Switched from LESS to SASS for source CSS files. SASS proved to be powerful than LESS.
Bootstrap 4 switched from px to rem as Bootstrap’s primary CSS unit. However, px was still used for media queries. Global font-size increased from 14px to 16px in Bootstrap 4. Also for global font family, Bootstrap 4 preferred system fonts as first priority.
Flexbox is one of the important and crucial features of Bootstrap 4 which makes it different from Bootstrap 3. Flexbox helps you manage formation of complex layouts with ease. Bootstrap 3 used floats to handle the layout unlike Bootstrap 4 that is using flexbox. Flexbox makes it easier to design flexible responsive layout structure without using float or positioning.
Bootstrap 3 had 4 tier grid system containing xs, sm, md and lg. But Bootstrap 4 uses 5 tier grid system. Bootstrap 4 removed xs breakpoint and added xl. Bootstrap 4 Grid System was improved and corrected for different break points. Extra Large or XL in Bootstrap 4 is same as Large or LG in Bootstrap 3. This means the change occurred for small devices break points that were improved a lot in Bootstrap 4.
For images img-responsive class was changed to img-fluid. As for a bonus tip, use d-block & mx-auto to center align image.
Limited colors are available in Bootstrap 3. In Bootstrap 4 more color options are available for text, backgrounds and components. You can also modify or extend relevant classes easily in Bootstrap 4.
Bootstrap 3 had few icons included with it. Bootstrap 4 dropped icons. Many devs don’t need or want icons in Bootstrap. Many developers use other icon fonts (such as Font Awesome). Bootstrap including its own icon fonts was an unnecessary bloat. Dedicated icon font projects could do a better job.
Wells, Panels and Thumbnails are supported in Bootstrap 3 but in Bootstrap 4 we use cards instead.
Bootstrap 4 can also be installed by using package manager like npm but Bootstrap 3 has no such option.
Dark/inverse classes are present in Bootstrap 4 unlike Bootstrap 3.
New Classes were added in Bootstrap 4 and few classes were removed. For navigation, images, media objects, tables, buttons, button groups, forms, input groups, list groups, dropdowns, typography, pagination, breadcrumbs, progress bar classes were changed, added new classes and removed few classes in Bootstrap 4. I won’t go into details on it for each element and components
because that you will be able to experience yourself when you work with Bootstrap 4.
Twitter Bootstrap is the first choice of front-end developers. It is a trusted open-source framework to develop modern websites and applications quickly. A most popular HTML, CSS, and JS framework for developing responsive websites. Twitter Bootstrap provides the basic structure of HTML and CSS with predefined classes, which help you to build functionality quickly and easily with device responsiveness. It saves plenty of time.
If interviewer asks about the major differences between Bootstrap 3 and Bootstrap 4,
You can say that:
– Bootstrap dropped LESS and adopted SASS in Bootstrap 4.
– CSS floats were dropped and CSS flexbox was adopted in Bootstrap 4.
– REM was adopted as global CSS unit instead of PX.
– Global font size was increased and Grid System was improved.
These were the most important and major changes from Bootstrap 3 to Bootstrap 4. As a frontend developer you can not ignore these changes. And as a frontend developer you should know why its important to switch from LESS to SASS and from CSS floats to CSS Flexbox.
And as for as which version to use is concerned, If project is already using Bootstrap 3, use Bootstrap 3. Otherwise Flexbox alone is a solid reason to prefer Bootstrap 4 over Bootstrap 3 or just use latest version of Bootstrap.
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: https://www.youtube.com/webstylepress
Website: https://www.webstylepress.com
FaceBook: https://www.facebook.com/webstylepress
Twitter: https://twitter.com/webstylepress
GitHub: https://github.com/webstylepress
#webstylepress #bootstrap #webdevelopment #twitterbootstrap
Original source