Display inline radio buttons with spacing to full width of div - html

Question

I have a Bootstrap form on my page, but the radio buttons are aligned to the left. I would like them to be spaced so they span the full width of the containing div. Here is the current code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<fieldset class="form-group">
<legend class="col-form-label required">Question</legend>
<div id="question">
<div class="form-check form-check-inline">
<input type="radio" id="question_0" name="question[1]" required="required" class="form-check-input" value="1">
<label class="form-check-label required" for="question_0">1</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_28_1" name="question[1]" required="required" class="form-check-input" value="2">
<label class="form-check-label required" for="question_1">2</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_1" name="question[1]" required="required" class="form-check-input" value="3">
<label class="form-check-label required" for="question_2">3</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_3" name="question[1]" required="required" class="form-check-input" value="4">
<label class="form-check-label required" for="question_3">4</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_4" name="question[1]" required="required" class="form-check-input" value="5">
<label class="form-check-label required" for="question_4">5</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_5" name="question[1]" required="required" class="form-check-input" value="6">
<label class="form-check-label required" for="question_5">6</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_6" name="question[1]" required="required" class="form-check-input" value="7">
<label class="form-check-label required" for="question_6">7</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_7" name="question[1]" required="required" class="form-check-input" value="8">
<label class="form-check-label required" for="question_7">8</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_8" name="question[1]" required="required" class="form-check-input" value="9">
<label class="form-check-label required" for="question_8">9</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="question_9" name="question[1]" required="required" class="form-check-input" value="10">
<label class="form-check-label required" for="question_9">10</label>
</div>
</div>
</fieldset>

Answer 1

Bootstrap Flex Utility readily provides the classes needed for the spacing. You can achieve this layout just by adding d-flex & justify-content-between to your questions container
<div id="question" class="d-flex justify-content-between">
...
</div>