I've encountered an issue when updating from Bootstrap 3 to Bootstrap 5. The glyphicon no longer works in the following code:
The HTML below displays nice radio buttons, but the glyphicon that should appear when an option is checked doesn't work with Bootstrap 5. How can I modify this code to be compatible with Bootstrap 5?
<ul class="chec-radio">
<li class="pz">
<label class="radio-inline">
<input type="radio" checked="" id="pro-chx-residential" name="property_type" class="pro-chx" value="constructed">
<div class="clab">Beginner</div>
</label>
</li>
<li class="pz">
<label class="radio-inline">
<input type="radio" id="pro-chx-commercial" name="property_type" class="pro-chx" value="unconstructed" checked>
<div class="clab">Intermediate</div>
</label>
</li>
<li class="pz">
<label class="radio-inline">
<input type="radio" id="pro-chx-open" name="property_type" class="pro-chx" value="open_land">
<div class="clab">Advanced</div>
</label>
</li>
</ul>
This CSS styling is used in the code:
ul.chec-radio {
margin: 15px;
}
ul.chec-radio li.pz {
display: inline;
}
.chec-radio label.radio-inline input[type="checkbox"] {
display: none;
}
.chec-radio label.radio-inline input[type="checkbox"]:checked+div {
color: #fff;
background-color: #000;
}
.chec-radio .radio-inline .clab {
cursor: pointer;
background: #e7e7e7;
padding: 7px 20px;
text-align: center;
text-transform: uppercase;
color: #333;
position: relative;
height: 34px;
float: left;
margin: 0;
margin-bottom: 5px;
}
.chec-radio label.radio-inline input[type="checkbox"]:checked+div:before {
content: "\e013";
margin-right: 5px;
font-family: 'Glyphicons Halflings';
}
.chec-radio label.radio-inline input[type="radio"] {
display: none;
}
.chec-radio label.radio-inline input[type="radio"]:checked+div {
color: #fff;
background-color: #000;
}
.chec-radio label.radio-inline input[type="radio"]:checked+div:before {
content: "\e013";
margin-right: 5px;
font-family: 'Glyphicons Halflings';
}
If anyone has suggestions on how to resolve this issue and make it work with Bootstrap 5, your help would be greatly appreciated. Thank you.