I was previously using this code in Boostrap 4 beta without any issues.
<label for="username" th:text="#{login.user">User</label>
<div class="input-group">
<span class="input-group-addon"><i class="icon-user"></i></span> <input
type="text" id="username" name="username" class="form-control"
placeholder="Usuario" th:placeholder="#{login.user}"
th:required="true" />
</div>
Recently, I updated my Bootstrap from version 4 beta to the current v4.0.0, and noticed that the code stopped working. The input-group-addon class seems to be missing from the Bootstrap css file now.
To fix this issue, I had to add the following styles to my custom css file:
.input-group-addon {
padding: .375rem .75rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
background-color: #e9ecef;
border: 1px solid #ced4da;
}
Is there something incorrect in the way I'm approaching this? Any help would be appreciated. Thanks