htmlcssthymeleafbootstrap-5

How to apply bootstrap style to inline <select> element

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

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

Solution

  • Follow the examples in the documentation:

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

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