<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <!--<div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small>3 days ago</small> </div> <div> <img src="http://icons.iconarchive.com/icons/martz90/circle/512/messages-icon.png" height="40" width="40" class="pull-left" /> <div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </div> </div>--> <div class="row"> <div class="col-xs-1"> <img src="http://icons.iconarchive.com/icons/martz90/circle/512/messages-icon.png" height="40" width="40" /> </div> <div class="col-xs-11"> <div class="ml-2"> <h5> SENDING A NEW MESSAGE TODAY HELLO WORLD </h5> <div class="d-flex w-100 justify-content-between"> <span>Sendit it now</span> <small>3 days ago</small> </div> </div> </div> </div> </a> </div>