<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/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 rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif; margin-top:20px"> <div class="row"> <a href="#" style="margin-bottom:20px;font-size:30px" class="btn btn-primary btn-lg btn-block" role="button">List items</a> <ul class="list-group"> <li class="list-group-item"> <div class="row"> <div class="col-xs-3 col-md-3"> <center><img src="https://i.pinimg.com/736x/27/52/c4/2752c45b7c3bfa90192171439f3a3ee0--monkey-primates.jpg" class="img-circle img-responsive" alt=""></center> </div> <div class="col-xs-9 col-md-9"> <div> <h2 class="listtitle">Monkey</h2> <div> Name <a href="#">Monkey</a> on 2 Nov 2024 </div> </div> <div class="listitem"> Lorem Monkey ipsum dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekamea </div> <div> <button type="button" class="btn btn-primary btn-xs" title="Edit"> <span class="glyphicon glyphicon-pencil"></span> </button> <button type="button" class="btn btn-success btn-xs" title="Approved"> <span class="glyphicon glyphicon-ok"></span> </button> <button type="button" class="btn btn-danger btn-xs" title="Delete"> <span class="glyphicon glyphicon-trash"></span> </button> </div> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-3 col-md-3"> <center><img src="https://i.pinimg.com/236x/bf/42/85/bf42855d50f2a491e26344c1b9683527.jpg" class="img-circle img-responsive" alt=""></center> </div> <div class="col-xs-9 col-md-9"> <div> <h2 class="listtitle">Orangutan</h2> <div> Name <a href="#">Orangutan</a> on 2 Nov 2024 </div> </div> <div class="listitem"> Lorem Monkey ipsum dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekamea </div> <div> <button type="button" class="btn btn-primary btn-xs" title="Edit"> <span class="glyphicon glyphicon-pencil"></span> </button> <button type="button" class="btn btn-success btn-xs" title="Approved"> <span class="glyphicon glyphicon-ok"></span> </button> <button type="button" class="btn btn-danger btn-xs" title="Delete"> <span class="glyphicon glyphicon-trash"></span> </button> </div> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-3 col-md-3"> <center><img src="https://i.pinimg.com/236x/ac/2d/dc/ac2ddceb9076a7d9933061e382bf007e--moth-caterpillar.jpg" class="img-circle img-responsive" alt=""></center> </div> <div class="col-xs-9 col-md-9"> <div> <h2 class="listtitle">Caterpillar</h2> <div> Name <a href="#">Caterpillar</a> on 2 Nov 2024 </div> </div> <div class="listitem"> Lorem Monkey ipsum dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekamea </div> <div> <button type="button" class="btn btn-primary btn-xs" title="Edit"> <span class="glyphicon glyphicon-pencil"></span> </button> <button type="button" class="btn btn-success btn-xs" title="Approved"> <span class="glyphicon glyphicon-ok"></span> </button> <button type="button" class="btn btn-danger btn-xs" title="Delete"> <span class="glyphicon glyphicon-trash"></span> </button> </div> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-3 col-md-3"> <center><img src="https://i.pinimg.com/236x/98/02/06/9802062cad1783945fe22015bf331683.jpg" class="img-circle img-responsive" alt=""></center> </div> <div class="col-xs-9 col-md-9"> <div> <h2 class="listtitle">Leopard</h2> <div> Name <a href="#">Leopard</a> on 2 Nov 2024 </div> </div> <div class="listitem"> Lorem Monkey ipsum dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekamea dolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekameadolor sit amet zamet emek pumet zakemaekamea </div> <div> <button type="button" class="btn btn-primary btn-xs" title="Edit"> <span class="glyphicon glyphicon-pencil"></span> </button> <button type="button" class="btn btn-success btn-xs" title="Approved"> <span class="glyphicon glyphicon-ok"></span> </button> <button type="button" class="btn btn-danger btn-xs" title="Delete"> <span class="glyphicon glyphicon-trash"></span> </button> </div> </div> </div> </li> </ul> <a href="#" style="margin-bottom:20px" class="btn btn-primary btn-lg btn-block" role="button"><span class="glyphicon glyphicon-refresh"></span> More</a> </div> </div>

.listitem { overflow: hidden; width:100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .listtitle { margin:0; padding:0; }