jquery - How do I get functionality in Grid.MVC to work properly with Bootstrap? -

i using grid.mvc asp.net mvc 4 project. using bootstrap. not sure if there conflict between stylesheets, or javascript between two, or if else altogether. have datagrid in partialview. don't know if maybe causing issue, but: 1) when add ".sortable(true)" end of each column, column headings change red, when click them reloads page , grid gone. 2) when rollover rows on grid, don't highlight. when click on rows don't highlight either. know row selected because created test "alert" pops when row selected.
jquery , bootstrap declared on _layout.cshtml shared view. how grid.mvc functionality work properly? below partialview grid:

 @scripts.render("~/bundles/mvcgrid")  @styles.render("~content/mvcgrid")  @using gridmvc.html  @model list<integrationquerytoolwebapp.models.request>   @html.grid(model0.named("requestgrid").columns(columns =>  {       columns.add(data => data.id).titled("id").sortable(true);       .....  })  <script>       $(function ()  {            pagegrids.requestsgrid.onrowselect(fuinction (e)  {                 alert(e.row.id);            });       });  <script> 

there 2 problems in code:

@scripts.render("~/bundles/mvcgrid") @styles.render("~content/mvcgrid") 

should be:

@scripts.render("~/bundles/mvcgrid.js") @styles.render("~/content/mvcgrid.css") 

and have typo error between

@html.grid(model0.named("requestgrid").columns 

and

pagegrids.requestsgrid.onrowselect 

requests / request