diff --git a/message/templates/message_area_message.mustache b/message/templates/message_area_message.mustache
index 01c5a3be0d9..c04eba98fe7 100644
--- a/message/templates/message_area_message.mustache
+++ b/message/templates/message_area_message.mustache
@@ -19,7 +19,7 @@
         {{blocktime}}
     </div>
 {{/displayblocktime}}
-<div class="message row-fluid"
+<div class="message d-flex row-fluid"
     data-region="message"
     data-blocktime="{{blocktime}}"
     data-id="{{id}}{{isread}}"
diff --git a/theme/boost/scss/moodle/message.scss b/theme/boost/scss/moodle/message.scss
index e50530093e9..8c7846deb93 100644
--- a/theme/boost/scss/moodle/message.scss
+++ b/theme/boost/scss/moodle/message.scss
@@ -506,11 +506,11 @@
                     }
 
                     .content.left {
-                        float: left;
+                        margin-left: auto;
                     }
 
                     .content.right {
-                        float: right;
+                        margin-right: auto;
                     }
                 }
             }