Posição do JqGrid na página

Boa noite pessoal tudo bem ?Eu estou trabalhando com jquery and asp.net MVC 4 and bootstrap e recentemento comecei a trabalhar com jqgrid retornando dados através de Json,porém ao inserir jqgrid na página estou com um problema a grid não obedece o fluxo da página e fica totalmente fora da página,abaixo do rodapé.Já retirei os css’s da página e não resolveu,assim como retirei alguns javascripts alguem poderia me ajudar?Alguém já passou por isso.Segue código:

<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if gt IE 9]> <html lang="en" class="ie"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>PrevPlay | @ViewBag.Title</title>
		<meta name="description" content="iDea a Bootstrap-based, Responsive HTML5 Template">
		<meta name="author" content="htmlcoder.me">

		<!-- Mobile Meta -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Favicon -->
		<link rel="shortcut icon" href="images/favicon.ico">

		<!-- Web Fonts -->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,300&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>

		<!-- Bootstrap core CSS -->
		<link href="~/bootstrap/css/bootstrap.css" rel="stylesheet">

		<!-- Font Awesome CSS -->
		<link href="~/fonts/font-awesome/css/font-awesome.css" rel="stylesheet">

		<!-- Fontello CSS -->
		<link href="~/fonts/fontello/css/fontello.css" rel="stylesheet">

		<!-- Plugins -->
		<link href="~/plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
		<link href="~/css/animations.css" rel="stylesheet">
		<link href="~/plugins/owl-carousel/owl.carousel.css" rel="stylesheet">

		<!-- iDea core CSS file -->
		<link href="~/css/style.css" rel="stylesheet" media="screen">
		
		<!-- Print Invoice CSS -->
		<link href="~/css/print-invoice.css" rel="stylesheet" media="print">

		<!-- Color Scheme (In order to change the color scheme, replace the red.css with the color scheme that you prefer)-->
		<link href="~/css/skins/red.css" rel="stylesheet">

		<!-- Custom css -->
		<link href="~/css/custom.css" rel="stylesheet">

        <link href="~/bootstrap/css/jquery-ui.css" rel="stylesheet" />

        <link href="~/css/ui.jqgrid-bootstrap.css" rel="stylesheet"/>


		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>

	<!-- body classes: 
			"boxed": boxed layout mode e.g. <body class="boxed">
			"pattern-1 ... pattern-9": background patterns for boxed layout mode e.g. <body class="boxed pattern-1"> 
	-->
	<body class="no-trans">
		<!-- scrollToTop -->
		<!-- ================ -->
		<div class="scrollToTop"><i class="icon-up-open-big"></i></div>

		<!-- page wrapper start -->
		<!-- ================ -->
		<div class="page-wrapper">			
			<header class="header fixed clearfix">
				<div class="container">
					<div class="row">
						<div class="col-md-3">

							<!-- header-left start -->
							<!-- ================ -->
							<div class="header-left clearfix">

								<!-- logo -->
								<div class="logo">
									<a href="index.html"><img id="logo" src="~/images/PrevPlay.png" alt="PrevPlay"></a>
								</div>

								<!-- name-and-slogan -->
								<div class="site-slogan">
                                    &nbsp;&nbsp;&nbsp;Preveja Seu jogo da Loteria
								</div>

							</div>
							<!-- header-left end -->

						</div>
						<div class="col-md-9">

							<!-- header-right start -->
							<!-- ================ -->
							<div class="header-right clearfix">

								<!-- main-navigation start -->
								<!-- ================ -->
								<div class="main-navigation animated">

									<!-- navbar start -->
									<!-- ================ -->
									<nav class="navbar navbar-default" role="navigation">
										<div class="container-fluid">

											<!-- Toggle get grouped for better mobile display -->
											<div class="navbar-header">
												<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
													<span class="sr-only">Toggle navigation</span>
													<span class="icon-bar"></span>
													<span class="icon-bar"></span>
													<span class="icon-bar"></span>
												</button>
											</div>

											<!-- Collect the nav links, forms, and other content for toggling -->
											<div class="collapse navbar-collapse" id="navbar-collapse-1">
												<ul class="nav navbar-nav navbar-right">
													<li class="dropdown">
														<a href="index.html" class="dropdown-toggle" data-toggle="dropdown">Cadastros</a>
														<ul class="dropdown-menu">
															<li><a href="~/Usuario/Usuarios">Cadastro-Usuários<span class="default-bg badge"><span class="glyphicon glyphicon-user"></span></span></a></li>
                                                            <li><a href="index.html">Cadastro-Bolas<span class="default-bg badge"><span class="glyphicon glyphicon-record"></span></span></a></li>
                                                            <li><a href="index.html">Cadastro-Tipo De Jogo <span class="default-bg badge"><span class="glyphicon glyphicon-pushpin"></span></span></a></li>
                                                            <li><a href="index.html">Regra De Previsão <span class="default-bg badge"><span class="glyphicon glyphicon-cog"></span></span></a></li>																														
														</ul>
													</li>
													<li class="dropdown">
														<a href="#" class="dropdown-toggle" data-toggle="dropdown">Jogos</a>
														<ul class="dropdown-menu">																				
														    <li><a href="features-typography.html">Realizar Previsão<span class="default-bg badge"><span class="glyphicon glyphicon-signal"></span></span></a></li>
															<li><a href="features-backgrounds.html">Jogos Realizados<span class="default-bg badge"><span class="glyphicon glyphicon-list"></span></span></a></li>									
														</ul>
													</li>						
											        <!-- mega-menu end -->
													<li class="dropdown">
														<a href="portfolio-3col.html" class="dropdown-toggle" data-toggle="dropdown">Estatísticas</a>
														<ul class="dropdown-menu">							
														    <li><a href="portfolio-item.html">Estatísticas-Acertos<span class="default-bg badge"><span class="glyphicon glyphicon-ok"></span></span></a></li>
															<li><a href="portfolio-item-2.html">Estatísticas-Algoritmo<span class="default-bg badge"><span class="glyphicon glyphicon-asterisk"></span></span></a></li>
															<li><a href="portfolio-item-3.html">Estatísticas-Por Jogos<span class="default-bg badge"><span class="glyphicon glyphicon-stats"></span></span></a></li>
														</ul>
													</li>
													<li class="dropdown">
														<a href="shop-listing-3col.html" class="dropdown-toggle" data-toggle="dropdown">Permissões</a>
														<ul class="dropdown-menu">
															<li><a href="index-shop.html">Permissões-Usuário<span class="default-bg badge"><span class="glyphicon glyphicon-lock"></span></span></a></li>
                                                            <li><a href="index-shop.html">Permissões-Grupo<span class="default-bg badge"><span class="glyphicon glyphicon-user"></span></span></a></li>															
														</ul>
													</li>
													<li class="dropdown">
														<a href="blog-right-sidebar.html" class="dropdown-toggle" data-toggle="dropdown">Conta</a>
														<ul class="dropdown-menu">
															<li><a href="blog-right-sidebar.html">Minha Conta<span class="default-bg badge"><span class="glyphicon glyphicon-user"></span></span></a></li>															
														</ul>
													</li>
												</ul>
											</div>

										</div>
									</nav>
									<!-- navbar end -->

								</div>
								<!-- main-navigation end -->

							</div>
							<!-- header-right end -->

						</div>
					</div>
				</div>
			</header>
			<!-- header end -->

			<!-- page-intro start-->
			<!-- ================ -->
			<div class="page-intro">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<ol class="breadcrumb">
								<li><i class="fa fa-user pr-10"></i><a href="index.html">Usuário Logado:@Session["Login"]</a></li>
								<li><i class="glyphicon glyphicon-log-out"></i><a href="index.html">Logout</a></li>                                           
                                                                                    
							</ol>

						</div>
					</div>
				</div>
			</div>
			<!-- page-intro end -->

			<!-- main-container start -->
			<!-- ================ -->	
            <div class="container">
                <div class="row">         		
                    <section>
                        <div id="bodyPage">
                           <div class="col-md-12">
                                <div class="jqGrid">
                                     <table id="listaUsuarios"/>
                                     <div id="paginacao"/>
                                </div>
                           </div>
                        </div>
                    </section>		
                 </div>	
            </div>
			<!-- section start -->
			<!-- ================ -->
			

			<!-- section end -->

			<!-- footer start (Add "light" class to #footer in order to enable light footer) -->
			<!-- ================ -->
          	<footer id="footer">
				<!-- .footer start -->
				<!-- ================ -->
				
				<!-- .footer end -->

				<!-- .subfooter start -->
				<!-- ================ -->
				<div class="subfooter">
					<div class="container">
						<div class="row">
							<div class="col-md-6">
								<p>Copyright © 2016 iDea by <a target="_blank" href="http://htmlcoder.me">HtmlCoder</a>. All Rights Reserved</p>
							</div>
							<div class="col-md-6">
								<nav class="navbar navbar-default" role="navigation">
									<!-- Toggle get grouped for better mobile display -->
									<div class="navbar-header">
										<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
											<span class="sr-only">Toggle navigation</span>
											<span class="icon-bar"></span>
											<span class="icon-bar"></span>
											<span class="icon-bar"></span>
										</button>
									</div>   
									<div class="collapse navbar-collapse" id="navbar-collapse-2">
										<ul class="nav navbar-nav">
											<li><a href="index.html">Home</a></li>
											<li><a href="page-about.html">About</a></li>
											<li><a href="blog-right-sidebar.html">Blog</a></li>
											<li><a href="portfolio-3col.html">Portfolio</a></li>
											<li><a href="page-contact.html">Contact</a></li>
										</ul>
									</div>
								</nav>
							</div>
						</div>
					</div>
				</div>
				<!-- .subfooter end -->

			</footer>
         
			<!-- footer end -->

		</div>
		<!-- page-wrapper end -->

		<!-- JavaScript files placed at the end of the document so the pages load faster
		================================================== -->
		<!-- Jquery and Bootstap core js files -->
		<script type="text/javascript" src="~/plugins/jquery.min.js"></script>
		<!--<script type="text/javascript" src="~/bootstrap/js/bootstrap.min.js"></script>-->

		<!-- Modernizr javascript -->
		<script type="text/javascript" src="~/plugins/modernizr.js"></script>

		<!-- Isotope javascript -->
		<script type="text/javascript" src="~/plugins/isotope/isotope.pkgd.min.js"></script>

		<!-- Owl carousel javascript -->
		<script type="text/javascript" src="~/plugins/owl-carousel/owl.carousel.js"></script>

		<!-- Magnific Popup javascript -->
		<script type="text/javascript" src="~/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>

		<!-- Appear javascript -->
		<script type="text/javascript" src="~/plugins/jquery.appear.js"></script>

		<!-- Sharrre javascript -->
		<script type="text/javascript" src="~/plugins/jquery.sharrre.min.js"></script>

		<!-- Count To javascript -->
		<script type="text/javascript" src="~/plugins/jquery.countTo.js"></script>

		<!-- Parallax javascript -->
		<script src="~/plugins/jquery.parallax-1.1.3.js"></script>

		<!-- Contact form -->
		<script src="~/plugins/jquery.validate.js"></script>

		<!-- SmoothScroll javascript -->
		<script type="text/javascript" src="~/plugins/jquery.browser.js"></script>
		<script type="text/javascript" src="~/plugins/SmoothScroll.js"></script>

		<!-- Initialization of Plugins -->
		<script type="text/javascript" src="~/js/template.js"></script>

		<!-- Custom Scripts -->
		<script type="text/javascript" src="~/js/custom.js"></script>

        <!--<script type="text/javascript" src="~/js/jquery-ui.min.js"></script>-->
        <script type="text/javascript" src="~/Scripts/jqGrid/grid.locale-en.js"></script>
        <script type="text/javascript" src="~/Scripts/jqGrid/jquery.jqGrid.min.js"></script>
        <!--<script type="text/javascript" src="~/Scripts/jqGrid/jquery.jqDatePicker.min.js"></script>-->
        <!--<script type="text/javascript" src="~/Scripts/jqGrid/jquery.jqDatePicker.min.js"></script>-->
       
        
        
        @RenderSection("scripts", false)
          

	</body>
</html>

Alguém para dar uma luz ai pessoal?