Category: Bootstrap

Categories
Bootstrap HTML

Bootstrap 5 — Browser Support and Customization

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.

Categories
Bootstrap HTML JavaScript

Getting Started with Bootstrap 5

photo of seals

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 the new features of Bootstrap 5 and how to get started using it.

New Look and Feel

Bootstrap 5 gives us a new look and feel that’s different from version 4.5.0.

Internet Explorer support is removed so that the package is now smaller.

Font sizes are now responsive rather than fixed sized.

Card decks are removed.

Navbar now requires less markup to add.

It’s no longer display as an inline-block element by default.

There’s also a new custom SVG icon library included with many icons.

jQuery and JavaScript

jQuery is removed as a dependency for Bootstrap since JavaScrtipt can provide the same functionality without the extra dependency.

Now that we don’t need it, that’s one less dependency that we’ve to include in our app.

The button plugin is now CSS only.

CSS Custom Properties

Bootstrap now uses CSS custom properties for styling.

This allows Bootstrap to reuse values for styling.

Enhanced Grid System

The grid system has improved.

Bootstrap 5 has a new grid tier, which is the xxl tier.

This is now the smallest breakpoint.

.gutter classes have been replaced with the .g* utiulities for gutter spacing.

Form layout options are replaced with a new grid system.

Vertical spacing classes are added.

Columns are no longer position: relative by default.

To define new gutters, we can write:

<div class="row g-5">  
  <div class="col">...</div>  
  <div class="col">...</div>  
</div>

We have the g-5 class for defining a butter,

Quick Start

We can download the Bootstrap package by going to the downloads page at https://v5.getbootstrap.com/docs/5.0/getting-started/download/.

Also, we can include it with the CDN. The CSS can be added by writing:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

and the JavaScript can be added by writing:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Together, we can write:

<!doctype html>  
<html lang="en">  
  <head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <title>Hello, world!</title>  
  </head>  
  <body>  
    <h1>Hello</h1> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>  
  </body>  
</html>

to get started.

The meta tags are for making the content scale properly on any screens.

The link tag has the Bootstrap CSS.

And the script tags have the Bootstrap JavaScript.

The JavaScript is optional.

The order have to be the same as what’s listed since Bootstrap requires Popper.js.

Package Managers

Bootstrap is also available as a package in NPM.

To install it, we run:

npm install bootstrap@next

Then we can include by writing:

const bootstrap = require('bootstrap')

or:

import bootstrap from 'bootstrap';

We can also install it with Yarn by running:

yarn add bootstrap

RubyGems

It’s also available as Ruby gem.

To install it, we add:

gem 'bootstrap', '~> 5.0.0-alpha1'

to our Gemfile and run bundle install .

We can also run:

gem install bootstrap -v 5.0.0-alpha1

to install it.

Composer

It’s also available as a Composer package. To installing, we run:

composer require twbs/bootstrap:5.0.0-alpha1

NuGet

If we’re using it in a .NET app, we can run:

Install-Package bootstrap

in Powershell.

HTML5 Doctype

The HTML5 doctype is required.

If we don’t have that, then we’ll see weird styling.

So we must write:

<!doctype html>  
<html lang="en">  
  ...  
</html>

Responsive Meta Tag

Bootstrap must have a responsive meta tag to enable it to zoom and scale on all devices.

This must be in the head tag.

So we must write:

<meta name="viewport" content="width=device-width, initial-scale=1">

Box-Sizing

Bootstrap switches from the box-sizing value from content-box to border-box to make sizing easier.

We can override that with:

.foo {  
  box-sizing: content-box;  
}

All child elements including ::before and ::after will inherit the specified box-sizing for .foo .

Reboot

Reboot is used to correct inconsistencies across browsers and devices.

Conclusion

Bootstrap 5 is the upcoming version of Bootstrap.

It removed IE support and lots of other bloat.

There are also many changes in appearance and code.

It’s available as many kinds of packages and also from their CDN.