I am encountering a challenge with aligning the input controls in my UI design. Specifically, I am trying to create rectangular borders/containers around each set of input controls and looking for a way to achieve this using Booststrap. For reference, you can view the code snippet and mock-up design here: https://i.sstatic.net/bM5sX.png.
In the provided image, the 'calendar icon' is not correctly positioned next to the 'Date' textbox, causing alignment issues with other controls. I also have a mock-up design available.
<div class="container-fluid bg-3 text-center">
<form>
<div class="form-row">
<div class=" form-group date col-md-2 ">
<label for="DateFrom">Date From</label>
<input type="text" class="form-control" id="DateFrom">
<span class="form-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
... (remaining code snippets follow)
To address the alignment issue and achieve the desired layout with borders around the input controls, please refer to the mock-up design and expected output here: https://i.sstatic.net/oifXp.png. Kindly advise on how to adjust the alignment and position the 'calendar icon' correctly next to the date textbox while also getting borders around the input controls.