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

2 posts, 0 answers
  1. Chris
    Chris avatar
    19 posts
    Member since:
    Feb 2016

    Posted 02 Nov Link to this post

    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?

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 03 Nov Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
Back to Top