New Post has been published on PSDTOHTMLCLOUD
New Post has been published on http://www.psdtohtmlcloud.com/blog/news/bootstrap-4-alpha-5/
Bootstrap 4 Alpha 5
Alpha 5 has arrived just over a month after Alpha 4 with some major feature improvements. Bootstrap v4.0.0-alpha.5 is available for download. Just use your favorite package manager, download the source, or use the Bootstrap CDN. Keep reading for the highlights and plans for Alpha 6.
Grid updates
Grid system has been updated. New in Alpha 5 are:
Breakpoint: Now you can use breakpoint specific grid gutters. Surprised? Yeah you heard it right my friend! Now you can customize the width of your gutters across each and every grid tier by modifying the Sass map.
Container: The .container behaviors have changed slightly in Alpha 5. Now each container will have width alongside a max-width: 100%; to ensure proper rendering across browsers in both our default and flexbox modes.
Dimensions of container and few breakpoint: Bootstrap have changed a few breakpoint and container dimensions.
The sm tier’s container is now smaller than it’s viewport dimensions.
The lg tier has changed from 940px to 960px.
New CSS bundles
Bootstrap have updated their build process to include compiled versions of all our CSS bundles. In addition to the longstanding default compiled and minified bundles, now they’ll include compiled CSS files for their flexbox mode, grid system only, and Reboot only bundles.
Each bundle includes a compiled, minified, and Sass map, just like the default compiled CSS.
Utilities classes updates
Utility classes got a ton of attention with Alpha 5 and will continue to in Alpha 6. Major changes in this release include:
Simpler margin and padding syntax (e.g., now mx-auto instead of m-x-auto).
Added new vertical-align utilities with .align-top, .align-middle, and more.
Renamed image utilities, moving from .img-rounded and .img-circle to .rounded and .rounded-circle, respectively.
Removed the display: block; from .img-fluid as it’s unnecessary for creating responsive images (the inline-block default works great as-is).
Separated background and color utilities for more explicit styling.
Navbar updates
Here’s a look at what’s new, how it works, and what might change in next release Alpha 6:
Brand new toggler: The navbar has a brand new toggler that features a customizable SVG-based background-image. With the power of Sass variables, that allows us to easily change the color of those hamburger menu icons.
Positioning & flexibility of brand and navigation: The default styles for the brand and navigation have largely been tweaked. There’s less custom styling overall and an emphasis on positioning and flexibility.
collapse plugin integration for responsive navbars: With the help of some utility classes and collapse classes for each grid tier, you can easily pick the breakpoint for collapsing your navbar without having to recompile your Sass.
Styling for various navbar subcomponents: Lastly, Bootstrap have updated the styling and documentation for various navbar subcomponents. There’s more flexibility and examples of the .navbar-brand, better form control support, higher nav contrast, themed responsive toggles, and more.
Coming to Alpha 6
There’s still more to do around the major components — the “navbar, flexbox variants, utilities, and accessibilty”. Stay tuned for more updates as we get closer to that release. Until then, test these changes and have fun with Alpha 5!
