This guide is intended to help with the changes related to the Bootstrap 5 upgrade as the client-side framework used by October CMS v3 and above.

Most legacy classes have been kept to maintain backwards compatibility support with previous versions of October CMS plugins and themes.

CSS Class Renames

The following are some common CSS class names that may need to be renamed. If you are keeping backwards compatibility support, then you can use these in addition to the old CSS class instead of renaming.

Updating Modals

The modal stylesheets now use flexbox to align their contents. For example, in modal headers the "close" button must come after the header, use a btn-close class and remove the symbol inner HTML.

Old Code

<button type="button" class="close" data-dismiss="popup">&times;</button>
<h4 class="modal-title">Modal title</h4>

New Code

<h4 class="modal-title">Modal title</h4>
<button type="button" class="btn-close" data-dismiss="popup"></button>

Alternative Fix

Alternatively, if you want to have backwards compatibility support, add flex-row-reverse in addition to the modal-header class and leave else everything in place.

<div class="modal-header flex-row-reverse">

Updating Forms

Form fields that have labels should use a new form-label class added to them.

Old Code

<div class="form-group">
    <label>Select a new user group</label>
        ...

New Code

<div class="form-group">
    <label class="form-label">Select a new user group</label>
        ...

Form fields that have comments should use the new form-text class.

Old Code

<p class="help-block">...</p>

New Code

<p class="form-text">...</p>

Updating Checkboxes

All checkbox, radio and switch controls have been updated to their Bootstrap equivalents. Below is an example of updating a checkbox.

Old Code

<div class="checkbox custom-checkbox">
    <input id="checkbox-example1" name="checkbox" value="1" type="checkbox">
    <label class="choice" for="checkbox-example1"> Dodge Viper</label>
</div>

New Code

<div class="form-check">
    <input class="form-check-input" id="checkbox-example1" name="checkbox" value="1" type="checkbox">
    <label class="form-check-label" for="checkbox-example1"> Dodge Viper</label>
</div>

Tooltips

If you are using Tooltips we recommend switching to the Vue tooltips that are included, however, the Bootstrap 5 tooltips will also work.

Old Code

<span title="Tooltip that works" data-toggle="tooltip">...</span>

New Code

<span data-tooltip-text="Tooltip that works">...</span>

Bootstrap 5 Documentation

View the Bootstrap 5 documentation to learn more about the available features that you can now use in the October CMS backend panel.