DatePicker style not working well with Bootstrap

[Stefan]

We want to use the DatePicker like this:

<div class="row">
    <div class="col">
        <div class="form-group">
            @Html.LabelFor(model => model.TESTDATUM, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.Kendo().DatePickerFor(model => model.TESTDATUM)
                @Html.ValidationMessageFor(model => model.TESTDATUM, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

But this renders the control like this:

We're currently using the following workaround to trim the overlapping part, which feels kind of 'hacky':

<div style="width: 17.5em">
    @Html.Kendo().DatePickerFor(model => model.TESTDATUM)
</div>

Is there a better/cleaner way to have the control to render correctly (with Bootstrap)?

[Aleksandar]

Hello Stefan,

What version of Telerik UI for ASP.NET MVC are you using and which version of Bootstrap?

Starting with R3 of 2021 or v4.40.0, the Kendo UI Bootstrap theme is based on Bootstrap v5. Support for form-* classes has been dropped.

That said, testing a DatePicker with the Kenbo bootstrap-main theme renders the component as expected on my end, as you can see in this REPL. So without details on the versions used I cannot be certain what might be causing the behavior observed.

Regards,
Aleksandar
Progress Telerik