Technology is changing continuously so that required languages and frameworks also. In same league bootstrap also upgrades. New Bootstrap lunched that’s bootstrap 4 after Bootstrap 3.7.7. Here are lists of new features that are New in Bootstrap 4 and that are not included.
Features that are Included In Latest Version
Flexbox by Default
Traditionally Bootstrap’s layout has been powered by float-based styles. In recent versions a flexbox alternative was made available, but given its widespread browser support flexbox is now the master of Bootstrap grids. The CSS technology behind Bootstrap grids doesn’t make a huge difference, but flexbox does offer more flexibility than floats, so flexbox-based grids do come with a few more options. For example, using flexbox means you can define one column and have its siblings automatically resizearound it.
Focused Browser Support
The move towards favouring flexbox actually prompted another change: browser support. Bootstrap v4 has officially dropped support for Internet Explorer 8, 9, and iOS 6. This effectively means your Bootstrap websites will only be supporting IE10+ and iOS 7+. Worth taking note of.
LESS to Sass
Fans of Sass will be pleased to hear that Bootstrap is now officially a Sass-first project. If you download the Bootstrap source you’ll find a folder called “Sass” in which you’ll see all the necessary partials. “_variables.scss” contains all the variables and settings you’ll need, then “bootstrap.scss” houses all the @import directives, allowing you to customise your Bootstrap installation by including or excluding whichever components you wish.
In all places apart from media queries, Bootstrap v4 has dropped pixels in favour of relative units of measurement like rems. This makes the whole thing more scalable, so if you haven’t yet grown used to rem units now would be a great time to take a look at these resources:
Additional Breakpoint Tier
Besides Bootstrap’s move away from float-based layouts, its responsiveness now also comes with an extra tier. From now on, you’ll be able to customise these five defaults:
The next notable change comes in the form of a new reset file. “Reboot” takes Normalize’s resets, which use only element selectors, then builds upon it with some opinionated class-based reset styles (you’ll find .table and .table-bordered buried in there with several others).
Features that are Not Included In Latest Version
If you’ve ever downloaded an earlier version of Bootstrap you’ll be familiar with the online customiser. This tool allowed you to check and uncheck various aspects of the Bootstrap framework in order to create your ideal version.
Well, it’s gone.
Instead, Bootstrap now focuses on its own modular structure, allowing you to leverage Sass from your end, include only what you need, and compile your own deployable end result .
Bootstrap no longer includes Glyphicons. Instead, you’re advised to find your own favourites and include them in whichever way you see fit. The Bootstrap team themselves prefer the following sets, which we recommend you implement as SVG rather than using web font icons:
How are Bootstrap 4 is different from Bootstrap 4
Keeping in mind the constant curiosity clouds that have remained around these Bootstrap’s versions. This has led us to the very difficult yet highly demanded Bootstrap 3 vs Bootstrap 4 comparison.
|Parameters||Bootstrap 3||Bootstrap 4|
|Source CSS file||LESS||SASS|
|Grid Tiers||4 grid tier system||5 gid tier system|
|Dropdown Structure||Can be created with <ul> and <li>||Can be created with <ul> or <div>|
|Default Pagination||.pagination needs to be added to <ul> element||.page-item must be added to to each <li> element and .page-link to each <a> element|
|Responsive Images||Apply .img-responsive class||Apply .img-fluid class|
|Responsive Tables||.table-responsive class should be added to parent <div> element||.table-responsive class to be added to <table> element|
|Navbar Alignment||Employ .navbar-right, .navbar-left to align components||Employ spacing utilities such as .mr-auto, or flexbox alignment utilities|