MVC5 Bootstrap Datetimepicker CSS not formatting correctly
<p>I'm currently working on adding a datetimepicker to my MVC5 project. I've decided to use Bootstrap.v3.datetimepicker by Eonasdan. Now, I have it working to an extent, but, the formatting is not correct. The current day is not selected, the month / year aren't aligned centrally and the time icon also isn't aligned centrally. Also, when trying to change the month/year, the months/years all display on one line.</p>

<p><a href="https://i.stack.imgur.com/MFCLV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MFCLV.png" alt="enter image description here"></a></p>

<p>It must be CSS related, but, I've no idea how to resolve it. Has anyone had the same problem and resolved this?</p>

<p>bundleconfig.cs</p>

<pre><code>        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*"));

        bundles.Add(new ScriptBundle("~/bundles/datetime").Include(
            "~/Scripts/moment*",
            "~/Scripts/bootstrap-datetimepicker*"));

        //         // 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/site.css"));

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

                 bundles.Add(new StyleBundle("~/Content/jqueryui")
                    .Include("~/Content/themes/base/all.css"));

    }
</code></pre>

<p>_Layout.cshtml</p>

<pre><code>...
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/datetime")
@RenderSection("scripts", required: false)
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Create.cshtml - control</p>

<pre><code>        &lt;div class="form-group"&gt;
        @Html.LabelFor(model =&gt; model.Check_Date, htmlAttributes: new { @class = "control-label col-md-2" })
        &lt;div class="col-md-10"&gt;
            @Html.EditorFor(model =&gt; model.Check_Date, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model =&gt; model.Check_Date, "", new { @class = "text-danger" })
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Create.cshtml - scripts</p>

<pre><code>@section scripts {
&lt;script type="text/javascript"&gt;
  $(function () {
  $('#Check_Date').datetimepicker({
    defaultDate: '@DateTime.Now',
    locale: 'en',
    widgetPositioning: {
        vertical: 'bottom',
        horizontal: 'left'
    }
});
});
&lt;/script&gt;
}
</code></pre>