Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize and extend Bootstrap 5 features and browser and device support.

Supported Browsers

Bootstrap supports modern browsers including the latest version of Legacy Edge.

Alternative browsers that use the Webkit, Blink, or Gecko engines should also display properly.

Mobile Devices

Bootstrap support most modern Android devices.

Android browser and webview from Android 6 or later is also supporred.

Chrome and Firefox in Android are also supported

iOS Chrome, Firefox, and Safari are also supported.

Desktop Browsers

On Mac, Chrome, Firefox, Edge, Opera, and Safari are supported.

On Windows, Chrome, Firefox, Edge, and Opera are supported.

Internet Explorer

Internet Explorer is no longer supported in Bootstrap 5.

Modals and Dropdowns on Mobile

overflow: hidden on body support is limited in iOS and Android.

This means that we can still scroll even with the CSS applied to it in those platforms.

iOS Text Fields and Scrolling

Since iOS 9.2, while a modal is open, the initial touch of a scroll features with an input element or body underneath the modal will be scrolled instead of the modal itself.

Navbar Dropdowns

.dropdown-navbar element isn’t used in iOS in the nav because of complexity with z-index.

Browser Zooming

Zooming may show rendering artifacts on the page and there’s no clean solution for this at the moment.

Sass

We can import SASS modules from the Bootstrap package.

This way, we can extend the Bootstrap SASS code with our own code.

For example, we can write:

@import "../node_modules/bootstrap/scss/bootstrap";

to include all Bootstrap styles.

We can also import them pieces one-by-one by writing:

@import "../node_modules/bootstrap/scss/functions";  
@import "../node_modules/bootstrap/scss/variables";  
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/reboot";  
@import "../node_modules/bootstrap/scss/type";  
@import "../node_modules/bootstrap/scss/images";  
@import "../node_modules/bootstrap/scss/code";  
@import "../node_modules/bootstrap/scss/grid";

Then we can override the values with our own code. For example, we can write:

$body-bg: green;  
$body-color: orange;

Modify Map

We can modify the $theme-colors map with our own code by overriding the values of the variables.

For example, we can write:

$primary: green;  
$danger: red;

And then they’ll override the values in the map.

Add to Map

We can add new values to the $theme-colors map.

For example, we can write:

$theme-colors: (  
  "custom-color": brown  
);

to our $theme-colors map.

Remove from Map

We can remove a color from a map with the map-remove function.

For example, we can write:

@import "../node_modules/bootstrap/scss/functions";  
@import "../node_modules/bootstrap/scss/variables";  
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light");
@import "../node_modules/bootstrap/scss/root";  
@import "../node_modules/bootstrap/scss/reboot";  
@import "../node_modules/bootstrap/scss/type";

We remove the info and light values from the $theme-colors map.

Colors

Bootstrap 5 dropped the color() , theme-color() , and gray() functions since those values are available as standalone variables.

For example, instead of using the theme-color("primary") to get the primary color value, we use $primary .

CSS Variables

Bootstrap includes many CSS variables that we can use in our app.

They include:

:root {  
  --bs-blue: #0d6efd;  
  --bs-indigo: #6610f2;  
  --bs-purple: #6f42c1;  
  --bs-pink: #d63384;  
  --bs-red: #dc3545;  
  --bs-orange: #fd7e14;  
  --bs-yellow: #ffc107;  
  --bs-green: #28a745;  
  --bs-teal: #20c997;  
  --bs-cyan: #17a2b8;  
  --bs-white: #fff;  
  --bs-gray: #6c757d;  
  --bs-gray-dark: #343a40;  
  --bs-primary: #0d6efd;  
  --bs-secondary: #6c757d;  
  --bs-success: #28a745;  
  --bs-info: #17a2b8;  
  --bs-warning: #ffc107;  
  --bs-danger: #dc3545;  
  --bs-light: #f8f9fa;  
  --bs-dark: #343a40;  
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";  
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;  
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));  
}

We can use these values for colors and fonts.

Conclusion

Bootstrap 5 supports most modern browsers.

Also, we can customize values in various ways.