Bootstrap released their latest beta version and it is said to be one of the most awaited versions of all times.This Beta update has arrived 7 months after the previous release i.e. Alpha 6 in Jan 2017.
It has rather shaped up the alpha version and provided significant bug fixes to enhance the user’s experience. This two-year long hustle by the Bootstrap team has brought a plethora of changes. But if you are living under a rock, and completely unaware of them, you can further go through the enlisted key highlights of the latest Bootstrap beta version mentioned below.
Features: Under the HUD!
- Bootstrap has become a part of the larger Sass community now.
- Almost everything is flex based; especially targeting mobile audience now.
- A completely different component, CARDS, has been introduced. These are merely a replacement of thumbnails, wells, and old panels. These act as content containers.
- They’ve let bygones be bygones and thus, they’ve cut loose with the age-old browser versions.
- Pixels have been bartered for rems
- Normalize.css and all HTML resets have been fused into a new CSS module, Reboot.
- Gradients, transitions, shadows, grid classes etc have been canopied under the option of Sass variables.
- A brand new colour palette and new systems fonts have been induced as well.
Bootstrap 4: Top Features and Enhancements
Bootstrap 4 comes with awesome features and perhaps it is not going to be easy to point out all but, we are pointing out some of the main features:
- Move from Less to Sass: With the new Libsass compiling is faster and the Sass developer’s community is also growing by the day.
- Improved Grid System: The Bootstrap update comes with a new grid tier and a new revamped semantic mixins.
- Flexbox Support: The future is the present! Switch to the Boolean variable, and compile a new CSS. This allows you to take full advantage of the flexbox-based grid system and the components.
- For cards- Dropped thumbnails, wells, and panels: The Bootstrap latest version comes with a new component-Card, but you will be at ease using them as they can handle everything from panels, thumbnails and wells, in fact, better.
- All HTML is consolidated in the new module, Reboot: Enter Reboot and out goes normalize.css, providing more reset opinions like margin tweaks, box-sizing: border – box and more in one single Sass file.
- Customised Options: No more limitations to transitions, shadows, gradients, matter-of-fact more of a separate stylesheet much like v3, are what to expect from Sass variables. Do you want default transitions on all or just disable the rounded corners? Well, in the Bootstrap update you just need to update a variable and recompile it.
- Dropping IE8 Support and Entering rem and em units: Bootstrap latest version drops IE8, no need to worry as the new Bootstrap update takes full advantage of the best CSS sections minus any fallback or hacks. Bootstrap latest update has swiped to rems and ems (where appropriate) making the responsive typography and component sizing easy. Still, if you want to continue using IE8, keep using Bootstrap 3.
- Improved popovers and tooltips auto-placement: Bootstrap 4 has improved popovers and auto-placement tooltips thanks to the library known as Tether.
- Improved Documentation: The Bootstrap 4 documentation is rewritten in Markdown with a few new added plugins allowing Bootstrap latest update to streamline examples and the code snippets, making work with Bootstrap docs a lot easy. Next on way in the Bootstrap update is an improved search as well.
Apart from all this the Bootstrap 4 comes packed with custom form controls, padding classes, new utility classes, margin, and more on the way.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
JS, Popper, and jQuery
1 2 3
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>