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 441 Views

General Discussions

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

Chris asked on 02 Nov 2016, 11:20 PM

ss1.png

ss2.png

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" />

<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>

<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>

</div>

@*<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

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.