I have a select and I wanted it to occupy the entire width of the form.
<html xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="background-color: black">
</br> </br>
<div class="container">
<div class="row">
<div class="col">
</div>
<div class="col-md-6 h-50" style="background-color:#fff;border: 25px solid green">
<div class="">
<fieldset>
<legend class="text-center header">Formulario IMC</legend>
<p>Rellene los campos y pulse calcular</p>
<form action="#" th:action="@{/}" th:object="${personForm}" method="post">
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-24">
<select th:field="*{sexo}" name="Sexo">
<option th:value="'Hombre'">Hombre</option>
<option th:value="'Mujer'">Mujer</option>
</select>
</div>
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-24">
<input th:field="*{edad}" id="edad" type="number" placeholder="Edad" class="form-control">
<div th:if="${#fields.hasErrors('edad')}" th:errors="*{edad}">Error</div>
</div>
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
https://es.stackoverflow.com/questions/ask# <div class="col-md-24">
<input th:field="*{altura}" id="altura " type="number" step="0.01" placeholder="Altura " class="form-control">
<div th:if="${#fields.hasErrors('altura')}" th:errors="*{altura}">Error</div>
</div>
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
<div class="col-md-24">
<input th:field="*{peso}" id="peso " type="number" step="0.01" placeholder="Peso" class="form-control">
<div th:if="${#fields.hasErrors('peso')}" th:errors="*{peso}">Error</div>
</div>
</div>
<div class="form-group">
<div class="col-md-22 text-center">
<button type="submit" value="Submit" class="btn btn-primary btn-lg btn-block bg-sucess" style="background-color: green" >Calcular</button>
</div>
</div>
</form>
</fieldset>
</div>
</div>
<div class="col">
</div>
</div>
</div>
</br> </br>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
All you need is to add the class
form-control
to the select :The result is as follows: