MVC5 Bootstrap Datetimepicker CSS not formatting correctly

Question

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.

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

bundleconfig.cs

        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"));

    }

_Layout.cshtml

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

Create.cshtml - control

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

Create.cshtml - scripts

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

Answer 1

You might have missed bootstrap-datetimepicker.css .

Refer to the below link: Follow the GitHub Link- By Eonasdan