Bootstrap 5 alpha new look & fantastic features

Bootstrap 5
  • Post author:
  • Post last modified:June 27, 2020
  • Reading time:5 mins read

Bootstrap alpha comes with fantastic features. Upgrade the modern look. Bootstrap 5 will fast page loading speed and lighter in file size. Bootstrap drops the jQuery as a dependency. In v4 and v5 Javascript file create the gap. In bootstrap, js v5 file handles all states like button toggle, model & program good quilty code, and lightweight. That boosts the performance of the new Bootstrap 5. Major changing v5 JS file. Click here

CSS Customize Property Support 

Bootstrap supports customizing the CSS properties and you can create custom properties. The thanks to dropping the internet explorer support. In v4 bootstrap has only fonts and color root variable but in v5 adds a handful component local variable.    

Take for example .tablecomponent,  striped, hoverable, and active table styles easier:

.table {
  --bs-table-bg: #{$table-bg};

--bs-table-active-color: #{$table-active-color};
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #{$table-striped-color};
--bs-table-striped-bg: #{$table-striped-bg};
--bs-table-active-bg: #{$table-active-bg};

--bs-table-hover-bg: #{$table-hover-bg};
--bs-table-hover-color: #{$table-hover-color}; }

Update the Form Design

Bootstrap 5 that one thing I like-new looks of forms.

Bootstrap-5 (Image credit)

Top 5 CSS frameworks | You must learn to become a successful freelancer

Utilities API

Using the utility API you can build your own CSS classes and properties or customize the pre-built bootstrap classes. It to much just pass an object to create or customize the CSS property see below.

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);


More info read the doc.

Ayat UR Rehman

I'm a self-taught programmer and professionally studying Accounting and Finance. I love blogging to explore the world. It gives a chance to learn several things from different systems.

Leave a Reply