This is a migrated thread and some comments may be shown as answers.

Correct referencing order and files to be referenced when using Bootstrap HTML?

1 Answer 365 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 02 Nov 2016, 11:20 PM

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

 

So I am thinking that maybe I have my referencing in incorrectly

here is my "masterpage"


@{
Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<script src="~/Scripts/Kendo.2016.1.226/kendo.all.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
 
@Styles.Render("~/Content/css")
 
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrapValidator.min.css")" rel="stylesheet" type="text/css" />
 
<!--Kendo style-->
<link href="~/Content/Kendo.2016.1.226/kendo.default.min.css" rel="stylesheet" />
<link href="@Url.Content("~/Content/Kendo.2016.1.226/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Kendo.2016.1.226/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
 
<link href="@Url.Content("~/Content/Custom/Layout.css")" rel="stylesheet" type="text/css" />
 
<link href="~/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/Custom/MyTest.css" rel="stylesheet" />
<link href="~/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/Custom/GlobalStyle.css" rel="stylesheet" />
 
</head>
<body>
<div class="container">
<div class="row">
<header>
<center><img src="~/Images/test-logo-sm.png" /></center>
</header>
</div>
<nav class="v-wrapper">
<ul>
<li class="v-brand">
 
<center><lh><label style="font-weight:bold; color:white;">Menu</label></lh></center>
</li>
<li>
<span class="glyphicon glyphicon-dashboard" style="color:green;"></span><a href="#" id="dashboard"> Dashboard</a>
</li>
<li>
<span class="fa fa-users" style="color:#003366;"> </span><a href="#" id="manageusers">Manage Login Users</a>
</li>
<li>
<span class="fa fa-group" style="color:orange;"> </span><a href="#" id="managegroups">Manage Groups</a>
</li>
<li>
<span class="fa fa-gears" style="color:red;"> </span><a href="#">Manage VS Equipment</a>
</li>
</ul>
</nav>
</div><!-- End Upper Container -->
  
<div class="container body-content">
<div class="row">
<div class="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 -->
@*<footer class="footer"><p align="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>



I can't get Bootstrap and KendoUI to play well together and I think it may have to do with my order of referencing all the CSS and Scripts. 

So what is the correct order?

 

1 Answer, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 03 Nov 2016, 09:05 AM
Hi Chris,

When using Kendo UI widgets alongside Bootstrap:
- You should use kendo.common-bootstrap.min.css instead of kendo.common.min.css;
- Bootstrap css files should be included before the Kendo UI ones. 

For more detailed information on this subject take a look at the following documentation topic: 

http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap

Unfortunately without reproducing the issue locally I can only guess what causes it. Is is possible to provide an isolated runnable example which I could test locally - this way I would be able to check what exactly is going wrong and provide concrete recommendations? 

Regards,
Iliana Nikolova
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
Tags
General Discussions
Asked by
Chris
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Share this question
or