I need to adjust the width of the label within a form in a Bootstrap modal. Currently, it is set to a max-width of 16.66667%. Is there a more effective way to do this or a specific class I should be using? The label seems to be getting cut off and there is extra space available on the right side. I prefer to utilize Bootstrap classes rather than creating my own custom ones.
<form class="game-score-modal" novalidate="novalidate" action="@Url.Action(Model.Score.UpdateGameUrl)" data-bind="submit: save, with: score">
.
.
.
<div class="form-row">
<label for="EnableSubscription">Communication</label>
<div class="col-auto">
<button type="button" class="btn btn-check active" data-toggle="buttons-checkbox" title="Send Email/Text"><i class="fa fa-comment"></i> </button><input checked="checked" data-bind="value: EnableSubscription,disable: EnableSubscription() == null ? true : false, checkbox: { checked: true, iconClass: 'fa fa-comment'}" id="EnableSubscription" name="EnableSubscription" title="Send Email/Text" type="checkbox" value="true"><input name="EnableSubscription" type="hidden" value="false">
<button type="button" class="btn btn-check active" data-toggle="buttons-checkbox" title="Post To Twitter"><i class="fab fa-twitter"></i> </button><input checked="checked" data-bind="value: EnableTwitter,disable: EnableTwitter() == null ? true : false, checkbox: { checked: true, iconClass: 'fab fa-twitter'}" id="EnableTwitter" name="EnableTwitter" title="Post To Twitter" type="checkbox" value="true"><input name="EnableTwitter" type="hidden" value="false">
<button type="button" class="btn btn-check active" data-toggle="buttons-checkbox" title="Post To Facebook"><i class="fab fa-facebook"></i> </button><input checked="checked" data-bind="value: EnableFacebook,disable: EnableFacebook() == null ? true : false, checkbox: { checked: true, iconClass: 'fab fa-facebook'}" id="EnableFacebook" name="EnableFacebook" title="Post To Facebook" type="checkbox" value="true"><input name="EnableFacebook" type="hidden" value="false">
</div>
</div>
<button type="submit" class="btn btn-primary"><i class="fa fa-check"></i> Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-ban"></i> Cancel</button>
</div>
</form>