Bootstrap 5 Migration Guide

Bootstrap, the framework that drives the style on the web portal, has been upgraded from v3 to v5 as of Beta v0.101. This was necessary due to Ember dropping support for v3 in the near future.

Unfortunately, v5 is not backwards-compatible. That means there are a number of things that had to change in the web portal code. If you’re just using the core code, you don’t have to do anything. Just let me know if something looks out of whack.

If you have custom web portal code and/or significant custom styling, you probably want to hold off on upgrading until you have had a chance to shake out any style issues on your test server. This migration guide should help.

Note! This is not meant to be an all-inclusive list of the changes between Bootstrap v3 and v5, merely the ones that I ran into while migrating the core web portal code.

If you run into trouble, don’t hesitate to ask.

Tab Controls

Tab control classes changed.

Use data-bs-toggle instead of data-toggle.

The list items require the nav-item and nav-link classes, and the list element needs the tablist role. Finally the ‘active’ class goes in the link, not the list item.

Put all together, it should look like this:

<ul class="nav nav-tabs" role="tablist">
   <li class="nav-item"><a data-bs-toggle="tab" class="nav-link active" href="#general">General</a></li>
    <li class="nav-item"><a data-bs-toggle="tab" class="nav-link" href="#profile">Profile</a></li>

For the tab panes, show is used in place of in

Old: tab-pane fade in active
New: tab-pane fade show active


btn-default no longer exists and should be replaced with btn-secondary

CSS Classes Renamed

label is now badge

panel is now card

Be careful if doing a find/replace on these, since the words may appear in places outside of CSS styling.

Rows and Columns

v5 really doesn’t like having a row without a column or vice-versa. The spacing gets weird. Make sure to wrap all your columns in rows.

<div class="row">
  <div class="col">Some column</div>


Similarly, v5 is stricter about thead and tbody elements. th elements must be inside of the header, and tr elements inside of the body. The proper form is:

<table class="table">
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
     body rows and columns go here

Pull Right

The CSS class pull-right is now named float-right.

I got rid of most uses of this in Ares though by making a more standard action buttons class. I advise using this for your page control buttons rather than pull-right/rows/columns.


<div class="row">
    <div class="col col-xs-12">
        <div class="pull-right">
           <button {{action "save"}} class="btn btn-primary">Save</button>

New, much simpler:

<div class="action-buttons">
  <button {{action "save"}} class="btn btn-primary">Save</button>

Dropdown Menus

The dropdown menu classes changed a bunch in v5. Fortunately there’s now a DropDown widget that will take care of it for you:

        <DropdownMenu @id="sceneMenu" @title="Manage Scene">
            <li><LinkTo @route="scene-edit" @model={{}} class="dropdown-item">Edit Scene</LinkTo></li>
            <li><a href="#" {{action 'unshareScene'}}  class="dropdown-item">Unshare Scene</a></li>

Just give it an ID that’s unique to the page, a title, and fill it with li items. Make sure each link inside the li item has the dropdown-item class.

Custom Scene Menus

If you have any custom scene menu items, make sure their links have the dropdown-item class. For example:

<li><a href="#" {{action (mut this.selectSkillRoll) true}} class="dropdown-item">Roll Ability</a></li>

Badge Colors

Badges (formerly known as labels) now use bg-primary instead of label-primary for their formatting. Be advised that Bootstrap gives these classes the !important declaration. So if your color override isn’t working, you may need to add !important to it. For example:

.bg-primary {
  background-color: $primary-color !important;

Screen Width Controls

The classes that control whether certain elements are hidden/shown at different screen widths are different. See display property for details.

For example, instead of using hidden-lg to hide something on large or higher displays, you’d use d-lg-none.