New in Bootstrap 4

0
255
New in Bootstrap 4

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.

REM

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:

1

2

3

4

5

6

7

$grid-breakpoints: (

xs: 0px,

sm: 576px,

md: 768px,

lg: 992px,

xl: 1200px

) !default;

Reboot

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 

Custom Builder

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 .

Glyphicons

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:

  • Iconic
  • Octicons

Grunt

Previous versions of Bootstrap included Grunt support to automate many of the common tasks; that’s now gone. Instead, Bootstrap now comes with a bunch of npm scripts which you’ll find in the “package.json” file. You can use these to do things like watch your Sass files for changes, perform lint tests on your JavaScript, or just use run npm dist to do everything and compile a distribution version of your finished website.

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

 

 

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here