Summernote in Asp.Net MVC

I tried implementing summernote wysiwyg editor in my Asp.Net MVC project as per the tutorial here.

I thought I was getting the same issue as this guy and implemented the suggestions but still no avail.

I've also ammended my web.config file as per here to try to fix the glyphicons problem but also to no avail.

If anyone can tell me what I'm doing wrong it'd be greatly appreciated.

See the text area in the text area and the button icons not rendering

Rendered HTML according to Chrome Debugger

.cshtml

<div class="form-group">
            @Html.LabelFor(model => model.Recipe.Instructions, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Recipe.Instructions, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Recipe.Instructions, "", new { @class = "text-danger" })
            </div>
        </div>

bundle

 public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles) {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{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"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/font-awesome.css",
                      "~/Content/site.css",
                      "~/Content/globalStyles.css"));

            bundles.Add(new StyleBundle("~/Content/summernote").Include(
                "~/Content/summernote/summernote.css"
                ));

            bundles.Add(new ScriptBundle("~/bundles/summernote").Include(
               "~/Content/summernote/summernote.js"
               ));
        }
    }

file structure

chrome errors

Solution

I ammended my scripts section in my cshtml file to include the css bundle like so

@section Scripts {
    @Scripts.Render(
        "~/bundles/jqueryval",
        "~/bundles/summernote",
        "~/Scripts/recipeCreate.js",
        "~/Scripts/wysiwyg.js");
    @Styles.Render(
        "~/Content/summernote"
    );
}