How to apply bootstrap style to inline <select> element-CodePudding

I am creating page in Thymeleaf, using Bootstrap 5. So far, created two parts. This part is having behaviour I want:

<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>

My problem is I can't find the way to style Year, Month and Day dropdowns to look similar to those below. I tried using form-select classes but then they expand to the end of the row.

This is how it look

I am open to any suggestions how to style this. Thanks in advance.

CodePudding user response：

Follow the examples in the documentation:

<p>Post office expenses</p>
<div class="row g-3 align-items-center">
    <label for="selectYear" class="col-auto">Year:</label>
    <div class="col-auto">
        <select id="selectYear" class="form-select" th:field="*{years}" onchange="getDaysInMonth()">
            <option th:each="y : ${years}" th:value="${y}" th:text="${y}"/>
        </select>
    </div>
    <label for="selectMonth" class="col-auto">Month:</label>
    <div class="col-auto">
        <select id="selectMonth" class="form-select" th:field="*{monthsList}" onchange="getDaysInMonth()">
            <option th:each="m : ${monthsList}" th:value="${m.id}" th:text="${m.monthName}"/>
        </select>
    </div>
    <label for="selectDay" class="col-auto">Day:</label>
    <div class="col-auto">
        <select name="selectDay" id="selectDay" class="form-select">
            <option th:each="n : ${#numbers.sequence(1,31)}" th:value="${n}" th:text="${n}"/>
        </select>
    </div>       
</div>

Demo