So, I changed the class to dmx standard class:
using float-right or text-success: The code works. But when use the css I created in the css file: with the custom code> It is not working.
I am guessing the class toggle is not finding the css document on its own.
<div class="order-sm-3 col-sm-12 order-2 col-lg-6 order-lg-1 col-12" id="ChatBox">
<div id="HoldMessageHistory">
<div class=" chatwrapper" dmx-repeat:messagewrapper="serverconnect4.data.repeat1[0].query1" dmx-class:float-left="(serverconnect2.data.queryUser[0].ID_user == serverconnect4.data.repeat1[0].query1[0].SenderID)">
<div class="d-block">
<p class="time-right">{{TimeStamp}}</p>
</div>
<div class="d-block">
<p>{{Message}}</p>
</div>
</div>
<div class="ReceiverMessage chatwrapper ">
<div class="d-block">
<p class="time-right">11:25 am</p>
</div>
<div class="d-block">
<a><img src="../../images/customertarget.jpg"></a>
<p class="bg-success">A nice paragraph</p>
</div>
</div>
</div>
</div>