Bootstrap 5 Migration

The following breaking changes must be addressed to consume this version of ADS and all versions thereafter. Please see the official bootstrap documentation for more information about upgrading your application to bootstrap 5

Accordions

  • .card has been replaced with .accordion
  • .card-header has been replaced with .accordion-item
  • .card-header-title has been replaced with .accordion-header everywhere except in the accordion's header which will continue to use the .card and .card-header classes.
  • h2 is used rather than h5
  • button class .accordion-button replaces .btn .btn-link and .btn-block
  • .data-toggle, .data-target, and .data-parent have been replaced with bootstrap's .data-bs-toggle, .data-bs-target. and .data-bs-parent
  • .collapse has been replaced with .accordion-collapse
  • .card-body has been replaced with .accordion-body
  • .mr-auto has been replaced with bootstrap 5's .me-auto (margin end rather than margin right)

Alerts

  • The div containing class .ads-alert-icon-container has been removed. The icon now uses class .text-lg and me-3
  • The .close class as well as the span containing class .fe and fe.x have been removed and replaced with the .btn-close class
  • .data-dismiss has been replaced with .data-bs-dismiss

Badges

The .badge-primary class has been replaced with .bg-primary, same for secondary, etc.

Buttons

  • .mr-3 (margin right) has been replaced with .me-3 (margin end)

Button group

  • .mr-3 (margin right) has been replaced with .me-3 (margin end)
  • For button group radio buttons, the class .button-group-toggle and the html attribute data-toggle="buttons" have been removed.
  • Button group radio button labels now contain the for attribute (example: for="btnradio1")
  • Button group radio button inputs now use the class .btn-check and the attribute autocomplete="off"

Cards

  • .btn-block class (used in pricing card component) has been deprecated.

Dropdowns

  • .dropdown-menu-right has been replaced with .dropdown-menu-end
  • .data-toggle has been replaced with .data-bs-toggle

Forms

  • .form-group, .form-row, and .form-inline have been replaced with Bootstrap's Grid system, utilities, and new ADS classes.
  • .custom-check is now .form-check, .custom-switch is now .form-switch.

Navbar

  • .data-toggle has been replaced with .data-bs-toggle
  • .data-target has been replaced with .data-bs-target
  • .badge-primary has been replaced with .bg-primary

Toasts

  • .mr-auto has been replaced with bootstrap 5's .me-auto (margin end rather than margin right)
  • button only uses class .btn-close, removed all others