asp.mvc css minification breaks kendo bootstrap

4 posts, 1 answers
  1. Morten
    Morten avatar
    345 posts
    Member since:
    Jul 2012

    Posted 27 Feb 2014 Link to this post

    In a mvc 4.5 web app using kendo bootstrap I get an 404 error when my css bundle is minified.

    Bootstrap v3.1.1
    Kendo UI Complete v2013.3.1424

    Web.config: <system.web><compilation debug="false" targetFramework="4.5" />


    public class BundleConfig
    public static void RegisterBundles(BundleCollection bundles)
    bundles.Add(new StyleBundle("~/Content/allcss").Include(

    "NetworkError: 404 Not Found - http://localhost:58709/Content/Bootstrap/sprite.png"

    Solution: If I copy/move the Bootstrap folder from Content/kendo to Content it works (in compilation debug="false"), however produces error in compilation debug="false".

    For now I can live with having the kendo/Bootstrap folder in two places.
  2. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 27 Feb 2014 Link to this post

    Hi Morten,

    Generally, there are two scenarios:

    1. If you are not using CSS bundles, then the theme images should reside in a subfolder, which is in the same folder where the Kendo UI CSS files are placed. For example:

    Kendo UI CSS files are in:
    ... / folder1 / folder2 / kendo.silver.min.css

    Kendo UI theme images should be in:
    ... / folder1 / folder2 / Silver / sprite.png

    The image paths in the Kendo UI CSS files are relative and in the following format:

    ThemeName / imagename.png

    In other words, the structure shown above will ensure the images are found.

    2. If you are using bundles, then the logic is similar, but since the URLs in the CSS code are still relative, you need to take into account the virtual URL from which the bundled CSS code will be loaded from. For example:

    Virtual CSS bundle url is:
    ... / folder1 / folder2 / bundleName

    Kendo UI theme images should be in:
    ... / folder1 / folder2 / Silver / sprite.png

    As you see, the easier way to achieve the desired correct loading of theme images is to make the virtual bundle URL match the Kendo UI CSS files' physical location. In this way the theme images will work both when bundles are enabled, and disabled.

    Kamen Bundev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Answer
    Sean avatar
    19 posts
    Member since:
    Jul 2012

    Posted 03 Mar 2014 in reply to Morten Link to this post

    You can also use the StyleBundle.Include overload that accepts a CssRewriteUrlTransform.

    Here's what one of my Kendo bundles looks like:

    bundles.Add(new StyleBundle("~/bundles/css/dashboard/black") { CdnPath = cdnPath + "bundles/css/dashboard/black" }
    .Include("~/content/css/menusprites.css", new CssRewriteUrlTransform())
    .Include("~/Content/kendo/kendo.common.min.css", new CssRewriteUrlTransform())
    .Include("~/Content/kendo/", new CssRewriteUrlTransform())
    .Include("~/Content/kendo/", new CssRewriteUrlTransform()));

  4. Moniques
    Moniques avatar
    1 posts
    Member since:
    Feb 2014

    Posted 06 Feb 2015 Link to this post

    Hi, I got exactly same problem after I upgrade telerik ui for mvc to 2014.3.1316 version. 

    Edit Icons were gone and I did checked bundle issue and could not find problem with it. 

    and Kendo.silver.min.css was located at 

    Is it bundle problem?

Back to Top