What’s New in Bootstrap 5 Alpha

by | Aug 31, 2020 | Development, Tips | 0 comments

    What’s New in Bootstrap 5 Alpha 

    Bootstrap is a CSS framework that makes responsive web and mobile development fast and easy. Bootstrap provides you with HTML and CSS based templates for forms, typography, tables, buttons, modals, navigation, image carousels and more. In this article, we will explore the latest Bootstrap 5 alpha version.

     

    Modified grid system 

    The grid system is one of the main attractions of Bootstrap. This system is made more capable in Bootstrap 5 alpha version. It comes with an extra extra large grid (xxl). This version has .g* utilities in the place of .gutter classes. You will also find Vertical spacing classes.

    code

    Let’s see an example.
    As you can see in the image, g-4 is spacing of 20px (1.5rem) from all side. You can also use .gy* and .gx* to give it specifically for horizontal and vertical.
    .gy* is for vertical gutter spacing
    .gx* is for horizontal gutter spacing
    Columns are not position:relative by default anymore. The new grid system has replaced form layout options. Bootstrap 5 alpha container comes with 6 breaking points.
    Xs <= 576px
    Sm >= 576px
    Md >= 768px
    Lg >= 992px
    Xl >= 1200px
    Xxl >= 1440px
    The grid system is greatly enhanced.

    Column
    Column
    Column
    Column

    Updated forms

    The Forms Section is a separate section in Bootstrap 5 alpha. All form controls are redesigned and deduped. Form controls are now fully custom. Every radio, checkbox, file, select, range etc come with a custom appearance. You can unify the behaviour and style of form controls across browsers and operating systems.

    settings

    Customizing docs

     

    Many libraries have been created based on Bootstrap. The latest version provides more support to extend Bootstrap, thanks to the new Customization Section. This section comes with more code snippets and content to build on top of source Sass files of Bootstrap. You also get an npm starter project.

     

    CSS custom properties

     

    Before Bootstrap 5 alpha, a limited set of root variables for fonts and colours had CSS custom properties. In the Bootstrap 5 version, you get them in components and layout options also.

     

    No More jQuery

    The largest change in the latest version is no jQuery. It is replaced with Vanilla JavaScript.

     

    Responsive Font Size

    Font size and margin padding are automatically adjusted across device and viewport sizes.
    Eg: .class {
    Padding : rfs(2rem);
    }
    It no longer supports Internet Explorer. There are many new icons added to Boostrap 5. However, you will not find any social media icons.

    Following are the classes removed and added:
    Classes Added:

     

    • row-cols-auto
    • g-*
    • gy-*
    • gx-*

    Classes Removed

     

    • Form-row
    • Card-deck
    • Form-inline
    • List line

     

    The latest version of Bootstrap 5 brings utilities API:

    Angular MVVM architecture