Message

  
   
<div class="row">
   <div class="col-lg-12">
   <div class="card">
      <div class="card-body">
         <h5 class="card-title"></h5>
         <ul class="messages col-md-6">
            <li class="message-item">
               <img src="assets/img/Username.svg" alt="" class="rounded-circle">
               <div>
                  <h4 class="message-title">Aurora Velasco <span class="date-time"> 12.15.2022 13:40</span></h4>
                  <p class="message-body">Lorem ipsum dolor sit amet, consectetur<br> adipiscing elit.</p>
               </div>
            </li>
            <li class="message-item">
               <img src="assets/img/Username2.svg" alt="" class="rounded-circle">
               <div>
                  <h4 class="message-title">Anthony Robinson <span class="date-time"> 12.14.2022 13:40</span></h4>
                  <p class="message-body">Lorem ipsum dolor sit amet, consectetur<br> adipiscing elit.</p>
               </div>
            </li>
            <li class="message-item">
               <img src="assets/img/Username3.svg" alt="" class="rounded-circle">
               <div>
                  <h4 class="message-title">Alicia Thomas <span class="date-time"> 12.13.2022 14:50</span></h4>
                  <p class="message-body">Nullam sapien justo, aliquam sit amet est <br>non, finibus dapibus odio. Duis fringilla <br> turpis  eget viverra tristique. Mauris non <br> ornare enim.</p>
               </div>
            </li>

            <li class="message-item">
                  <div class="col-md-12 d-flex">
                     <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Text">
                     <button type="button" class="btn btn-primary ms-3">Button</button>
                  </div>
            </li>

            



         </ul>
      </div>
   </div>
</div>
</div>
     
            

  
   

   
      .message-item img {
       margin: 0 20px 0 10px;
       max-height: 40px;
       width: 40px;
     }
     
     .rounded-circle {
         border-radius: 50%!important;
     }
     
      .message-item {
         padding:5px 5px;
         transition: 0.3s;
         display: flex;
     }
     
     
     ul.messages {
       list-style: none;
       padding: 0;
     }
     .message-title {
       font-size: 18px;
       font-weight: 700;
     }
     
     .date-time {
       font-size: 14px;
       font-weight: 400;
       color: #7A7A7A;
       margin-left: 10px;
     }
     
     .message-body {
       color: #5F5F5F;
     }