setup bootstrap template in mvc c#

Question

i create a mvc c# project and wanna using a bootstrap as a template. the problem here is some of my .js (javascript), font and css is not working when im publish the project (from the boostrap template). below is my folder structure and all the javascript and css in in the assets folder

here is my App_Start (BundleConfig.cs)

public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/respond.js",
                    "~/Scripts/SoftwareWizards.js",
                    "~/assets/global/plugins/jquery-migrate-1.2.1.min.js",
                    "~/assets/global/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js",
                    "~/assets/global/plugins/bootstrap/js/bootstrap.min.js",
                    "~/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js",
                    "~/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
                    "~/assets/global/plugins/jquery.blockui.min.js",
                    "~/assets/global/plugins/jquery.cokie.min.js",
                    "~/assets/global/plugins/uniform/jquery.uniform.min.js",
                    "~/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js",
                    "~/assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js",
                    "~/assets/global/plugins/flot/jquery.flot.min.js",
                    "~/assets/global/plugins/flot/jquery.flot.resize.min.js",
                    "~/assets/global/plugins/flot/jquery.flot.categories.min.js",
                    "~/assets/global/plugins/jquery.pulsate.min.js",
                    "~/assets/global/plugins/bootstrap-daterangepicker/moment.min.js",
                    "~/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js",
                    "~/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js",
                    "~/assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js",
                    "~/assets/global/plugins/fullcalendar/fullcalendar/fullcalendar.min.js",
                    "~/assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js",
                    "~/assets/global/plugins/jquery.sparkline.min.js",
                    "~/assets/global/plugins/gritter/js/jquery.gritter.js",
                    "~/assets/global/scripts/metronic.js",
                    "~/assets/admin/layout/scripts/layout.js",
                    "~/assets/admin/layout/scripts/quick-sidebar.js",
                    "~/assets/admin/pages/scripts/index.js",
                    "~/assets/admin/pages/scripts/tasks.js",
                     "~/assets/admin/pages/scripts/jquery.pulsate.min.js.js",
                     "~/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js",
                     "~/assets/admin/pages/scripts/components-pickers.js",
                     "~/assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js",
                    "~/assets/global/plugins/select2/select2.min.js",
                    "~/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js",
                    "~/assets/global/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js",
                    "~/assets/global/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js",
                    "~/assets/global/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js",
                    "~/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/assets/global/plugins/font-awesome/css/font-awesome.min.css",
                    "~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",
                    "~/assets/global/plugins/bootstrap/css/bootstrap.min.css",
                    "~/assets/global/plugins/uniform/css/uniform.default.css",
                    "~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
                    "~/assets/global/plugins/gritter/css/jquery.gritter.css",
                    "~/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css",
                    "~/assets/global/plugins/fullcalendar/fullcalendar/fullcalendar.css",
                    "~/assets/global/plugins/jqvmap/jqvmap/jqvmap.css",
                    "~/assets/admin/pages/css/tasks.css",
                    "~/assets/global/css/components.css",
                    "~/assets/global/css/plugins.css",
                    "~/assets/admin/layout/css/layout.css",
                    "~/assets/admin/layout/css/themes/default.css",
                    "~/assets/global/plugins/bootstrap-datepicker/css/datepicker.css",
                    "~/assets/admin/layout/css/custom.css",
                    "~/assets/global/plugins/select2/select2.css",
                    "~/assets/global/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css",
                    "~/assets/global/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css",
                    "~/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"));


        bundles.Add(new StyleBundle("~/Content/font-awesome-bundle").Include(
                    "~/Content/font-awesome/css/font-awesome.min.css",
                    "~/assets/global/plugins/select2/select2.css",
                    "~/assets/global/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css",
                    "~/assets/global/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css",
                    "~/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"));
    }

can someone tell me what wrong with problem and how to setup the the ScriptBundle and StyleBundle corretly..

Answer 1

So, I faced a similar issue while publishing the project. One of the thumb rules you should follow is that the resources which you are bundling should bunched according to the folders you have them.

For e.g. I had a common.css which is refering to a logo inside /Styles/Common/Images Folder and I bundled it in together /Styles/

It was not able to refer to the image and my publish copy was failing.

Instead of having mega bundles like the ones you have.

I would operationally separate them and make smaller bundles viz.

All JS items from /assets/global/plugins in one bundle. All CSS items from /assets/global/plugins in one bundle. and so on..

And Don't forget to call these in the _layout.cshtml in correct order!