Web Development

I have following line of HTML codes and I would like to show or display only four lines of description in each card and rest text would display when I click on "readmore" button, which probably render in different page/pages. Therefore how to limit the lines or characters in card-text in bootstrap. Help is appreciated:-

<div class="col-4 ml-2" *ngFor="let t of techBlogs">
            <div class="card shadow">
              <div class="card-body">
                <h2 class="card-title">{{t.title}}</h2>
                <h4 class="card-text">{{t.name}}</h4>
                <h4 class="card-text text-muted" id="run">{{t.postCreatedDate | date}}</h4>
                <h4 class="card-text">Description: {{t.description}}
                  <a href="#" class="btn btn-success btn-sm">read more..</a>
                </h4>
              </div>
            </div>
          </div>

 @using (Html.BeginForm("DeleteCustomer", "Forms", FormMethod.Post, new { enctype = "multipart/form-data", name = "Submitclaims" }))
{
<button class="btn" id="Delete" type="submit" formaction="DeleteRow" formmethod="post" name="command" value="Delete">Delete</button>
}

@{var message = ViewBag.Message;}
$("#DeleteDialog").dialog({
height: 280,
modal: true,
autoOpen: false,
  buttons: {
    'Confirm': function () {
        $.ajax({
            type: "POST",
            cache: false,
            url: "/Forms/MyMethod",
            success: function (data) {                                    
              @if (message == "Deleted"){
                ViewBag.Message = null;
                ViewBag.Status = null;
                <text>
                 alert("Successfully deleted!");                                            
                 jQuery("#jQGrid").clearGridData(true).trigger("reloadGrid");
                 jQuery('#jqGrid').trigger( 'reloadGrid' );
                 $('#files').empty();
                </text>
              }
            }            
         });
      $(this).dialog('close');
    },
    'Cancel': function () {
        $(this).dialog('close');
     }
  }
 });

public class LoginController : ApiController
{
    public UserEntity Login(string userName, string password)
    {
        // Return value
        UserEntity results = null;

        // Credential object
        var credentials = new CredentialEntity();
        credentials.UserName = userName;
        credentials.Password = password;

        // Create an instance of the App Security class
        var connString = "";
        var appSec = new ApplicationSecurity(connString);

        // Call Login
        appSec.Login(credentials);

        // Do stuff when logged in
        if (appSec.IsUserLoggedIn)
        {
            // Do some other stuff here

            // Return the current user's entity to the caller
            results = appSec.CurrentUser;
        }

        return results;
    }
}

$("#jqGrid").jqGrid({
       url: "/Folder/ShowProductsDetails",
       editurl: '/Folder/EditProductDetails',
       datatype: 'json',
       mtype: 'Get',
       ajaxSelectOptions: { type: 'POST' },

       viewrecords: true,
       prmNames: { id: "ProductsLineId" },
       sortname: "Purchase_Date",
       sortorder: "DESC",
       hoverrows: true
       },
       colNames: ['ProductsLineId', 'Purchase Date', 'Company'],
       colModel: [
           { key: true, hidden: true, name: 'ProductsLineId', index: 'ProductsLineId'},
           { name: 'Purchase_Date', title: false, stype: 'text', index: 'Purchase_Date', formatter: 'date',
             formatoptions: { newformat: 'm/d/Y' }, editable: true, formoptions: { rowpos: 1, colpos: 2,
             label: 'Purchase Date *' }, editrules: { required: true },
           },
           { name: 'Company', title: false, stype: 'text', index: 'Company', formatter: 'date',
             formatoptions: { newformat: 'm/d/Y' }, editable: true, formoptions: { rowpos: 1, colpos: 2,
             label: 'Purchase Date *' }, editrules: { required: true },
           }
           ],
           shrinkToFit: false,
           pager: jQuery('#jqControls'),
           rowNum: 50,
           rowList: [50, 100, 150, 200],
       scrollerbar: true,
       height: 'auto',
       autoheight: true,
       autowidth: true,
       viewrecords: true,
       caption: 'Uploaded Product Details',
       emptyrecords: 'No Records are Available to Display',
       jsonReader: {
           root: "rows",
           page: "page",
           total: "total",
           records: "records",
           repeatitems: false,
           id: 'ClaimsLineId'
       },
       multiselect: true
   }).navGrid('#jqControls', { add: false, edit: true, del: true, search: true, refresh: true},

   {//Code for Add},{//Code for Edit},{//Code for Delete}

public ActionResult ShowProductsDetails(string operation Product prod, string extraData)

<pre><?php require_once('Connections/eam.php'); ?>
<?php 
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$colname_rsMaintenanceAsset = "-1";

if (isset($_GET['recordID'])) {
  $colname_rsMaintenanceAsset = $_GET['recordID'];
}
mysql_select_db($database_eam, $eam);
$query_rsMaintenanceAsset = sprintf("SELECT * FROM maintenance_history WHERE maint_id = %s", GetSQLValueString($colname_rsMaintenanceAsset, "int"));
$rsMaintenanceAsset = mysql_query($query_rsMaintenanceAsset, $eam) or die(mysql_error());
$row_rsMaintenanceAsset = mysql_fetch_assoc($rsMaintenanceAsset);
$totalRows_rsMaintenanceAsset = mysql_num_rows($rsMaintenanceAsset);
}

 
$pageTitle="Maintenance History"; ?>



<?php include('includes/header.php'); ?>
    <h3>Maintenance history for  Asset ID: <?php echo $colname_rsMaintenanceAsset; ?></h3>
    <table class="table1">
      <tr>
        <th>Maintenance ID</th>
        <th>Date Completed</th>
        <th>By</th>
        <th>Checklist</th>
        <th>Comments</th>
        <th>SPARE</th>
        <th>View   </th>
      </tr>
      <?php do { ?>
        <tr onmouseover="this.bgColor='#F2F7FF'" onmouseout="this.bgColor='#FFFFFF'";>
          <td> <?php echo $row_rsMaintenanceAsset['id']; ?>  </td>
          <td> <?php echo $row_rsMaintenanceAsset['date_completed']; ?>  </td>
          <td> <?php echo $row_rsMaintenanceAsset['by_staff']; ?>  </td>
          <td> <?php echo $row_rsMaintenanceAsset['maint_checklist']; ?>  </td>
          <td> <?php echo $row_rsMaintenanceAsset['maint_comm']; ?>  </td>
          <td> <?php echo $row_rsMaintenanceAsset['status']; ?>  </td>


          <td> <a href="HardwareDetail.php?recordID=<?php echo $row_rsMaintenanceAssets['maint_id']; ?>">View</a></td>
 
        </tr>
      <?php } while ($row_rsMaintenanceAssets = mysql_fetch_assoc($rsMaintenanceAssets)); ?>
    </table>