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.
|Old Class||New Class|
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.
<button type="button" class="close" data-dismiss="popup">×</button> <h4 class="modal-title">Modal title</h4>
<h4 class="modal-title">Modal title</h4> <button type="button" class="btn-close" data-dismiss="popup"></button>
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">
Form fields that have labels should use a new
form-label class added to them.
<div class="form-group"> <label>Select a new user group</label> ...
<div class="form-group"> <label class="form-label">Select a new user group</label> ...
Form fields that have comments should use the new
All checkbox, radio and switch controls have been updated to their Bootstrap equivalents. Below is an example of updating a checkbox.
<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>
<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>
If you are using Tooltips we recommend switching to the Vue tooltips that are included, however, the Bootstrap 5 tooltips will also work.
<span title="Tooltip that works" data-toggle="tooltip">...</span>
<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.