Bootstrap is a popular open-source framework for building responsive web applications. Version 4 of Bootstrap introduced significant changes including new features like cards and flexbox support, changes to the grid system and navbar, and dropping support for older browsers. It also updated underlying technologies, removing LESS for SASS and refactoring JavaScript plugins to ECMAScript 6.

1. A Handy Reference of What’s New What’s Changed and
What’s Gone in Bootstrap 4
Bootstrapis the mostpopularopensource client-side webdesignframeworkusedforcreatingweb
applicationsandwebsites.Inthe lastfouryears,Bootstrapreleasedthree versionsandfromtime to
time upgradingwiththe newcourse of webcomponentsfor betterusability.On itsfourthanniversary,
19th Aug.2015, Bootstrapannouncedthe release of version4alpharelease andon27th Jul.2016,
Bootstrap4 alpha3 wasreleased.There are manychangesand improvements inthe new versionof
Bootstrap.
1. New Features
1.1. Brand New Bootstrap Cards
Cards have beenintroducedtounifysome of the previouselementssuchaspanels,wells,and
thumbnails.Itisanextensible andflexiblecontentcontainer.Itincludesoptionsforawide variety
of content,headersandfooters,powerfuldisplayoptions,andcontextualbackgroundcolors. Cards
are more flexible andallow abiggerspace forcreative implements.
1.2. Opt-in Flexbox Support
In the newerversionof Bootstrapyoucan take advantage of CSS3's Flexbox Layout.Flexbox
layoutsare adaptable andcan be well utilizedinthe responsive design.It presents anelastic
containerwhichfills the availablespace eitherbyexpandingorshrinkingitself tothe most
proficientway.
IE 9 users,please note thatFlexbox doesnotsupportversion9.Hence the defaultversionof
Bootstrap4 usesfloatanddisplayCSSpropertiesforthe implementationof afluidlayout.
1.3. Relative CSS Units
As a significantmove tostreamline the CSS -Bootstrap4droppedsupportforIE8 browser.The
newrelease usesREMsand EMs whichenablesimplementationof responsive typographyon
Bootstrapsites.Italsoimprovesreadabilityandimprovementinaccessibilityforphysically
challengedusers.
1.4. Handy Utilities
Varioususeful helperclasses have beenaddedsuchasmarginand padding,andtexthelpers.
Also,there are responsiveandcontextual colorshelperclassestohide contentonparticular
breakpoints.
2. Significant Changes
2.1.Improved Grid System

2. Bootstrap'sfluidgridsystemallowsprogrammerstofocusvariousdeviceshavingdifferent
viewports.AtpresentBootstrap3.x gridsystemoffers4classestodefine differentsizecolumns.
Bootstrap4 improvesthe fluidgridmechanismwitha5th one which facilitatesprogrammersto
aimfor small deviceshavingaviewportof 480 px or lesserthanthat.
2.2.Completely Redesigned Navbar
The newNavbar is simpler.Youcan toggle itusingthe Collapse component,the `.navbar-
toggleable-xs`,`.navbar-toggleable-sm`,etc..letyoucontrol the breakpoint.Here'san example.
2.3.Fonts are Bigger
In Bootstrap4, the defaultfontsize whichwasearlier14px isnow changedto 16px. Also,a
newlarge displayforheadingswhichmakestextstand out.
2.4.Tether powers tooltips and Popovers
Tether,a JavaScriptlibrary,offersthe positionof anabsolute positionedelementstaynextto
each otherona webpage.The powerof Tetherwill enable automaticplacementof tooltipsand
popovers.Note thatitisa 3rd party librarywhichsupportsIE9+, needstobe includedseparatelyin
your HTML before addingthe bootstrap.js.
2.5.A New Approach to Global Theming
It will be the mostinterestingchange.Atpresent,withthe version3.x,itisveryhardto do
changesinRAW CSS,LESS file andoverridingthe settings.Easycustomizationof the global theme is
expectedinthe newversion.
3. RIP
3.1.Rearranged Support for IE
The newerversionhas droppedsupportforIE8 as it wasnot supporting CSSmediaqueries.IE
9 doesnotsupportFlexbox.TosupportIE9 Bootstraphas made Flexbox asoptional tointegrate
withthe framework.
3.2.Glyphicons Dropped
Glyphicons,whichwasusedbymany, hasbeenremoved.The alternativeprovidedistouse
FontAwesome andOcticons asthirdparty components.Instructionswillbe includedeventuallyin
the documentation.
4. Changes Behind the Scene
4.1.Bye Bye LESS, Hello SAAS
As compare to LESS,SASSis more popularamongfrontenddevelopers.SASSiseasiertouse,
offersmore possibilitiesandhasan immense communitybase.

3. 4.2.Refactored JavaScriptPlugins
All JavaScriptpluginsnoware rewritteninECMAScript6to take the benefitof the latest
specificationtoimprove the frontendexperience.
4.3.Optimized Variable Customization
Nowall the Sass variablesare incorporatedintoone single file named _variables.scss.This
makescustomization veryeasy.Tochange the defaultvalues,one needs tocopythe settingsinto
anotherfile named_custom.scss.
4.4.New Reset Component Called Reboot
The Rebootmodule nowreplacesthe normalize.cssfile.The new moduleisthe enhanced
versionof the normalize.csswiththe goal toinclude genericstyle andselectorswithinasingle and
easyto use .SCSSfile.Thischange enabledthe usertooverride the defaultsettingina betterway
withoutusing'!important'.
Thisarticle isbasedon Bootstrap4 alpha3 version.Forlatest updates,visitthe official blog.