AdminLTE - direct chat - text align

Hi,has anybody gotten this: https://adminlte.io/docs/3.0/components/direct-chat.html to work within phpMaker

I’m using the call out portion not the panel, it kind of works but when you display the name and date, it doesn’t split it like in the example – they appear both on the left sidethe code below displays notes from a table, and alternates the callout as in the example, but the float-right don’t appear to work:

    while(!$rs->EOF) {
        $UserName=  _getUserInfo("Fullname", $rs->fields['UserId']);
        $DateCreated = date("F j, Y g:i a", strtotime($rs->fields['DateCreated']));
        $cn_comments = $rs->fields['EmployeeCaseNoteComments'];
        $cn_type = _GetPicklistInfo("picklist_Text", $rs->fields['EmployeeCaseNoteType']);

        if($cnt%2){ // odd                                                 
            $content .= "
                    <div class=\"direct-chat-msg\">
                    <div class=\"direct-chat-infos clearfix\">
                      <span class=\"direct-chat-name float-left\"><strong>$UserName</strong></span>
                      <span class=\"direct-chat-timestamp float-right\">$DateCreated</span>
                    </div>
                    <div class=\"direct-chat-text \">
                      <h6>$cn_type</h6> $cn_comments
                    </div>
                  </div>";
        }
        else { // even
            $content .= "<div class=\"direct-chat-msg right\">
                    <div class=\"direct-chat-infos clearfix\">
                      <span class=\"direct-chat-name float-right\"><strong>$UserName</strong></span>
                      <span class=\"direct-chat-timestamp float-left\">$DateCreated</span>
                    </div>        
                    <div class=\"direct-chat-text\">
                      <h6>$cn_type</h6> $cn_comments
                    </div>
                 </div>";
        }
        $cnt++;
        $rs->MoveNext();
    }
          
    return $content;

Thanks,
JH

You may try Bootstrap Text alignment.