What is the correct referencing order and files to be referenced when using Bootstrap and KendoUI in html?
Right now I have a view that I guess you can call a masterpage, and I have referenced Bootstrap and KendoUI but I noticed when creating a grid, and adding filtering capability to it that I am getting two extra columns, as seen in attachment ss1.PNG .
However, when I add the code into KendoUI's dojo it looks normal, as seen in attachment ss2.PNG
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>Test</title>
<scriptsrc="~/Scripts/jquery-2.1.0.min.js"></script>
<scriptsrc="~/Scripts/Kendo.2016.1.226/kendo.all.min.js"></script>
<scriptsrc="~/Scripts/bootstrap.min.js"></script>
@Styles.Render("~/Content/css")
<linkhref="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet"type="text/css"/>
<linkhref="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet"type="text/css"/>
<linkhref="@Url.Content("~/Content/Site.css")" rel="stylesheet"type="text/css"/>
<linkhref="@Url.Content("~/Content/bootstrapValidator.min.css")" rel="stylesheet"type="text/css"/>
<!--Kendo style-->
<linkhref="~/Content/Kendo.2016.1.226/kendo.default.min.css"rel="stylesheet"/>
<linkhref="@Url.Content("~/Content/Kendo.2016.1.226/kendo.common.min.css")" rel="stylesheet"type="text/css"/>
<linkhref="@Url.Content("~/Content/Kendo.2016.1.226/kendo.common-bootstrap.min.css")" rel="stylesheet"type="text/css"/>
<linkhref="@Url.Content("~/Content/Custom/Layout.css")" rel="stylesheet"type="text/css"/>
<linkhref="~/font-awesome-4.6.3/css/font-awesome.min.css"rel="stylesheet"/>
<linkhref="~/Content/Custom/MyTest.css"rel="stylesheet"/>
<linkhref="~/font-awesome-4.6.3/css/font-awesome.min.css"rel="stylesheet"/>
<linkhref="~/Content/Custom/GlobalStyle.css"rel="stylesheet"/>
</head>
<body>
<divclass="container">
<divclass="row">
<header>
<center><imgsrc="~/Images/test-logo-sm.png"/></center>
</header>
</div>
<navclass="v-wrapper">
<ul>
<liclass="v-brand">
<center><lh><labelstyle="font-weight:bold; color:white;">Menu</label></lh></center>
</li>
<li>
<spanclass="glyphicon glyphicon-dashboard"style="color:green;"></span><ahref="#"id="dashboard"> Dashboard</a>
</li>
<li>
<spanclass="fa fa-users"style="color:#003366;"> </span><ahref="#"id="manageusers">Manage Login Users</a>
</li>
<li>
<spanclass="fa fa-group"style="color:orange;"> </span><ahref="#"id="managegroups">Manage Groups</a>
</li>
<li>
<spanclass="fa fa-gears"style="color:red;"> </span><ahref="#">Manage VS Equipment</a>
</li>
</ul>
</nav>
</div><!-- End Upper Container -->
<divclass="container body-content">
<divclass="row">
<divclass="col-md-12 col-lg-12">
<h1>Blah</h1>
<p> This is where your main stuff goes</p>
</div>
</div><!-- End Row -->
</div><!-- End Main Container -->
<!-- Scripts -->
@*<footerclass="footer"><palign="center">Footer Content Goes here</p></footer>*@
<script>
$(document).ready(function () {
$('#manageusers').click(function () {
$('.body-content').load("../ManageLoginUsers/ManageUsers");
});
$('#managegroups').click(function () {
$('.body-content').load("../ManageGroups/ManageGroups");
});
});
</script>
</body>
</html>