I had a situation to add hide some of the jqGrid table columns for mobile view. So I decide to apply bootstrap class to the specific columns. For checking the docs of jqGrid. I realised there is a way to add class the table column by ‘classes’ property. But it is not reflected in the table headers. So these answers from stack overflow was really helpful.

<code>    //Takes css classes assigned to each column in the jqGrid colModel 
    //and applies them to the associated header.
    var applyClassesToHeaders = function (grid) {
        // Use the passed in grid as context, 
        // in case we have more than one table on the page.
        var trHead = jQuery("thead:first tr", grid.hdiv);
        var <code>colModel</code> = <code>grid</code>.jqGrid("getGridParam", "colModel");

        for (var iCol = 0; iCol &lt; colModel.length; iCol++) {
            var columnInfo = colModel[iCol];
            if (columnInfo.class) {
                var headDiv = jQuery("th:eq(" + iCol + ") div", trHead);
                headDiv.addClass(columnInfo.class);
            }
        }
    };

    //Example grid configuration just to illustrate
    var grid = jQuery('#list');
    grid.jqGrid({
        data: myData,
        datatype: 'local',
        caption: 'Order Details',
        height: 'auto',
        gridview: true,
        rownumbers: true,
        viewrecords: true,
        pager: '#pager',
        rownumbers: true,
        colNames: ['Order ID', 'Order'],
        colModel: [
            { name: 'orderID', index: 'orderID', classes: 'hide-phone' },
            { name: 'orderDate', index: 'orderDate', classes: '<code>hide-phone</code>' },        
        ]
    });

    //Applies the classes to the headers once the grid configuration is complete.
    applyClassesToHeaders(grid);
</code>

Happy to share!