I don't have expertise in Bootstrap or CSS. I'm attempting to build an input for DateTime with arrows on the sides using Bootstrap 5 and Razor Pages. My initial tries did not yield satisfactory results.
I want an ItemGroup that includes a DateTime picker and a button on the left with an "arrow". The examples I tried resulted in:
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button"><</button>
</div>
<div class="form-floating">
<input class="form-control" asp-for="startTime" asp-format="{0:yyyy-MM-ddTHH:mm}" />
<label for="startTime">Start Time</label>
</div>
</div>
resulting in:
https://i.sstatic.net/f89AW.png
It would be ideal if the button had the same height as the form-floating div.
or Example2:
<div class="form-floating">
<div class="form-control" id="datetime_wrap">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button"><</button>
</div>
<input class="form-control" asp-for="startTime" asp-format="{0:yyyy-MM-ddTHH:mm}" />
</div>
</div>
<label for="datetime_wrap">Start Time</label>
</div>
resulting in:
https://i.sstatic.net/3uYZB.png
The second approach seems closer to what I want to achieve, but the bounding box of the floating div should not intersect with the input box.
Question: Can I achieve this using only vanilla bootstrap, or do I need to use a separate CSS class to resolve this issue?