Could someone help me align the 3 radio options in this HTML code to make them appear justified? I have already tried using d-flex and btn-group-justify without success.
If anyone could provide a sample using only Bootstrap 4.1+, it would be greatly appreciated.
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- SECTION - FLEX - BETWEEN -->
<section class="form-group d-flex justify-content-between px-1 mb-2">
<!-- COL-12 - CONTAINER -->
<div class="col-12 px-0">
<span class="badge rounded-0 w-100 bg-dark text-white mb-0" style="font-size: 1rem;">Paint Quality</span>
<!-- INPUT-GROUP + BTN-GROUP-TOGGLE -->
<!-- INPUT RADIOS -->
<div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn rounded-0 btn-lg btn-primary active px-2">
<input type="radio" class="testclass2" name="paint_quality_option" id="" value="30" autocomplete="off" checked> $30
</label>
<label class="btn rounded-0 btn-lg btn-primary px-2">
<input type="radio" class="testclass2" name="paint_quality_option" id="" value="60" autocomplete="off"> $60
</label>
<label class="btn rounded-0 btn-lg btn-primary px-2">
<input type="radio" class="testclass2" name="paint_quality_option" id="" value="90" autocomplete="off"> $90
</label>
</div>
<span class="badge rounded-0 w-100 bg-dark text-white mb-0" style="font-size: 1rem;">x 1 gl / Basic / Standard / Premium</span>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>