Under the Hood

go.raybo.org/B5N01_01

There's a lot of changes in this new version of Bootstrap. Before we get into specific components, let's dig into some of the changes that aren't as obvious when you are looking to upgrade to this new version.

Dependencies

  • jQuery
  • Popper 2.0
  • Dart Sass

Speaker Notes:

jQuery was at the heart of how bootstrap worked in the past. Bootstrap relied on jQuery for almost all of it's interactivity as well as its selector engine. All of that has now been re-written into pure javascript. That makes bootstrap load faster, because it uses less code.

For a lot of features, bootstrap relied on another library called Popper, so instead of using version 1 bootstrap 5 now uses version 2. You don't really need to worry about this unless you were also using popper to do some things yourself.

Bootstrap is built with Sass, and the older version used a processor called Libsass. That processor has now been deprecated, so bootstrap 5, like most modern projects now uses DartSass. It's faster and unless you're working with the sass version of bootstrap, you won't even notice.

Dropped Support

  • Internet Explorer 10, 11
  • Microsoft Edge < 16
  • Firefox < 60
  • Mac/iOS Safari < 12
  • Chrome < 60

Speaker Notes:

Bootsrap is a modern framework and in order to evolve, older browsers had to be dropped. You can see that it doesn't support any versions of Internet Explorer and some versions of other browsers. If you need to support these, you should use an older version of Bootsrap.

Installation Changes

  • No jQuery
  • Popper
  • RTL Versions

There are a couple of changes that you'll need to be aware of when installing. Obviously, you won't need to be installing a copy of jQuery with this new version, so if you're updating a site, you can safely remove jQuery unless you need it for your own site.

Since the version of Popper has been updated as well, you'll need to make sure you're loading version 2 if you're loading the file separately. Bootstrap does still add a bootstrap.bundle file with the new version of popper included.

The biggest change to your installation will be that there are now two different bootstrap installs. A regular bootstrap set of files and a whole other bootstrap RTL or Right To Left files. If you're using a language that uses a right to left orientation, then make sure you're loading a right to left version of Bootstrap.

JavaScript Changes

  • NameSpaced data-bs-toggle
    not data-toggle
  • Plugins CSS Selector
let modal = new bootstrap.Modal('#yourModal')

Speaker Notes:

One of the things you'll notice when working with the scripts is that all of the data attributes now begin with data-bs so that they don't conflict with other non-bootstrap library. This makes things safer, but it does require some updating in your older projects.

Another super useful feature is that plugins now take a CSS selector as the first argument. So to create an instance of an element a lot of times you just tell it the name of an element you want to use.