"Bootstrap table with icons"
Bootstrap 3.0.1 Snippet by nateh777

<div class="container"> <div class="row"> <div id="ctl08_ctl06_stMain_ctl28_pnlForms"> <div id="ctl08_ctl06_stMain_ctl28_pnlFilter" style="background-color: #F4F2F2; border-top: solid 1px #B1B1B1"> <div id="ctl08_ctl06_stMain_ctl28_divFilter" class="form-horizontal well"> <div class="form-group"> <label for="ctl08_ctl06_stMain_ctl28_ddlCategoryBootstrap" class="control-label col-sm-2">Show Category</label> <div class="col-sm-10"> <select name="ctl08$ctl06$stMain$ctl28$ddlCategoryBootstrap" onchange="javascript:setTimeout('__doPostBack(\'ctl08$ctl06$stMain$ctl28$ddlCategoryBootstrap\',\'\')', 0)" id="ctl08_ctl06_stMain_ctl28_ddlCategoryBootstrap" class="select form-control"> <option selected="selected" value="-1">All</option> <option value="10351">Test Cat</option> <option value="10352">Category 1</option> </select> </div> </div> </div> </div> <div class="grid-results"> <div class="table-responsive"> <table class="table table-striped kfsdatagrid" cellspacing="0" cellpadding="3" border="0" id="ctl08_ctl06_stMain_ctl28_dgForms" style="border-collapse:collapse;"> <tbody> <tr class="listHeader nodrop" valign="bottom"> <td class="listHeader"><a href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl04$ctl00','')">#</a></td> <td class="listHeader"><a href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl04$ctl01','')">Title</a></td> <td class="listHeader" align="right">Preview</td> <td class="listHeader" align="right">Report</td> <td class="listHeader"> </td> </tr> <tr class="listItem" valign="top" onmouseover="this.style.backgroundColor='#E8E5E5';" onmouseout="this.style.backgroundColor='#F4F2F2';" id="ctl08_ctl06_stMain_ctl28_dgForms_row_2" style="background-color: rgb(244, 242, 242);"> <td>2</td> <td valign="top">New Form Instance</td> <td class="smallText" align="right" style="white-space:nowrap;"><a class="btn btn-default" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl00','')"><i class="fa fa-search"></i></a></td> <td class="smallText" align="right" style="white-space:nowrap;"><a onclick="window.open('ReportPDFViewer.aspx?Report=/ccbcfw/Arena/Forms/Form Printer&Person=1&FormInstance=2', 'contribPopUp13915','width=800,height=800,toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=1,left=50,top=50');return false;" class="btn btn-default" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl01','')"><i class="fa fa-list"></i></a></td> <td class="smallText" align="right" style="white-space:nowrap;"><a onclick="return confirmDGDelete(this, 'Are you sure you want to delete this form instance?', '#F4F2F2', '#FFFFFF', '#fefebb');" title="Delete this form instance" class="btn btn-danger" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl04','')"><i class="fa fa-trash"></i></a></td> </tr> <tr class="listItem" valign="top" onmouseover="this.style.backgroundColor='#E8E5E5';" onmouseout="this.style.backgroundColor='#F4F2F2';" id="ctl08_ctl06_stMain_ctl28_dgForms_row_2" style="background-color: rgb(244, 242, 242);"> <td>2</td> <td valign="top">New Form Instance</td> <td class="smallText" align="right" style="white-space:nowrap;"><a class="btn btn-default" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl00','')"><i class="fa fa-search"></i></a></td> <td class="smallText" align="right" style="white-space:nowrap;"><a onclick="window.open('ReportPDFViewer.aspx?Report=/ccbcfw/Arena/Forms/Form Printer&Person=1&FormInstance=2', 'contribPopUp13915','width=800,height=800,toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=1,left=50,top=50');return false;" class="btn btn-default" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl01','')"><i class="fa fa-list"></i></a></td> <td class="smallText" align="right" style="white-space:nowrap;"><a onclick="return confirmDGDelete(this, 'Are you sure you want to delete this form instance?', '#F4F2F2', '#FFFFFF', '#fefebb');" title="Delete this form instance" class="btn btn-danger" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl04','')"><i class="fa fa-trash"></i></a></td> </tr> <tr class="listItem" valign="top" onmouseover="this.style.backgroundColor='#E8E5E5';" onmouseout="this.style.backgroundColor='#F4F2F2';" id="ctl08_ctl06_stMain_ctl28_dgForms_row_2" style="background-color: rgb(244, 242, 242);"> <td>2</td> <td valign="top">New Form Instance</td> <td class="smallText" align="right" style="white-space:nowrap;"><a class="btn btn-default" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl00','')"><i class="fa fa-search"></i></a></td> <td class="smallText" align="right" style="white-space:nowrap;"><a onclick="window.open('ReportPDFViewer.aspx?Report=/ccbcfw/Arena/Forms/Form Printer&Person=1&FormInstance=2', 'contribPopUp13915','width=800,height=800,toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=1,left=50,top=50');return false;" class="btn btn-default" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl01','')"><i class="fa fa-list"></i></a></td> <td class="smallText" align="right" style="white-space:nowrap;"><a onclick="return confirmDGDelete(this, 'Are you sure you want to delete this form instance?', '#F4F2F2', '#FFFFFF', '#fefebb');" title="Delete this form instance" class="btn btn-danger" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl04','')"><i class="fa fa-trash"></i></a></td> </tr> <tr class="listItem" valign="top" onmouseover="this.style.backgroundColor='#E8E5E5';" onmouseout="this.style.backgroundColor='#F4F2F2';" id="ctl08_ctl06_stMain_ctl28_dgForms_row_2" style="background-color: rgb(244, 242, 242);"> <td>2</td> <td valign="top">New Form Instance</td> <td class="smallText" align="right" style="white-space:nowrap;"><a class="btn btn-default" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl00','')"><i class="fa fa-search"></i></a></td> <td class="smallText" align="right" style="white-space:nowrap;"><a onclick="window.open('ReportPDFViewer.aspx?Report=/ccbcfw/Arena/Forms/Form Printer&Person=1&FormInstance=2', 'contribPopUp13915','width=800,height=800,toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=1,left=50,top=50');return false;" class="btn btn-default" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl01','')"><i class="fa fa-list"></i></a></td> <td class="smallText" align="right" style="white-space:nowrap;"><a onclick="return confirmDGDelete(this, 'Are you sure you want to delete this form instance?', '#F4F2F2', '#FFFFFF', '#fefebb');" title="Delete this form instance" class="btn btn-danger" href="javascript:__doPostBack('ctl08$ctl06$stMain$ctl28$dgForms$ctl05$ctl04','')"><i class="fa fa-trash"></i></a></td> </tr> </tbody> </table><input type="hidden" name="ctl08$ctl06$stMain$ctl28$dgForms$dgForms_mpMergeDocuments_hfTarget" id="ctl08_ctl06_stMain_ctl28_dgForms_dgForms_mpMergeDocuments_hfTarget"> <div id="ctl08_ctl06_stMain_ctl28_dgForms_dgForms_mpMergeDocuments_pnlMPE" style="display: none; position: fixed; z-index: 100001;"> <div id="ctl08_ctl06_stMain_ctl28_dgForms_dgForms_mpMergeDocuments_container" class="modal-container"> <div id="ctl08_ctl06_stMain_ctl28_dgForms_dgForms_mpMergeDocuments_content" class="modal-content"> <div id="ctl08_ctl06_stMain_ctl28_dgForms_dgForms_mpMergeDocuments_phMPE"> </div> </div><a title="Close" class="modal-close" onclick="$find('dgForms_mpMergeDocuments').hide();"></a> <div class="modal-buttons"> <input type="submit" name="ctl08$ctl06$stMain$ctl28$dgForms$dgForms_btnCancelMerge" value="Cancel" id="ctl08_ctl06_stMain_ctl28_dgForms_dgForms_btnCancelMerge" class="smallText" style="width:100px;"> </div> </div> </div> <div id="dgForms_mpMergeDocuments_backgroundElement" class="modalBackground" style="display: none; position: fixed; left: 0px; top: 0px; z-index: 10000;"></div> </div> </div> </div> </div> </div>
var cssId = 'myCss'; // you could encode the css path itself to generate id.. if (!document.getElementById(cssId)) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.id = cssId; link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; link.media = 'all'; head.appendChild(link); }

Questions / Comments:

Related: See More