Currently working on a page layout using Thymeleaf and Bootstrap 5. I have divided the page into two parts, with this section behaving as desired:
<main role="main" class="pb-3">
<br>
<p>Post office expenses</p>
<div class="row">
<div class="form-inline">
<div class="form-group">
<span>Year:</span>
<select id="selectYear" th:field="*{years}" onchange="getDaysInMonth()">
<option th:each="y : ${years}" th:value="${y}" th:text="${y}"/>
</select>
<span>Month:</span>
<select id="selectMonth" th:field="*{monthsList}" onchange="getDaysInMonth()">
<option th:each="m : ${monthsList}" th:value="${m.id}" th:text="${m.monthName}"/>
</select >
<span>Day:</span>
<select name="selectDay" id="selectDay">
<option th:each="n : ${#numbers.sequence(1,31)}" th:value="${n}" th:text="${n}"/>
</select >
</div>
</div>
</div>
<div class="row pt-3">
<div class="col-2">
<form>
<div class="form-group">
<label for="typeOfMail">Type of mail:</label>
<select class="form-select form-select-sm" id="typeOfMail">
<option>Letter</option>
<option selected>Reserved</option >
<option>Package</option>
<option>Fast delivery</option>
<option>Returned mail</option>
</select >
</div>
<div class="form-group">
<label for="destination">Destination:</label>
<select class="form-select form-select-sm" id="destination">
<option>Domestic</option>
<option>Foreign</option>
</select >
</div>
</form >
</div>
<div class="col-9 text-center">
<h2>Picture</h2>
</div>
</div>
</main>
</div>
I'm struggling to style the Year, Month, and Day dropdowns like the ones displayed below. I've attempted using form-select classes but they extend to the end of the row.
Any suggestions on how to better style this are welcomed. Thank you in advance.