If you want to use the
col-*
classes, your parent element needs the
row
class:
<div class="form-group row">
It doesn't make any sense to have the "Content Licence" label inside the
<div class="col-sm-5">
element, since it's not related to the Course Name input.
If you want the input to stretch to fill the available width, use
col-sm
instead of
col-sm-5
.
If you want the label to only take up the space it requires, use
col-sm-auto
instead of
col-sm-3
. This will of course mean that other fields in the same form don't line up if their labels are longer or shorter.
Alternatively, you could right-align the labels by adding
text-right
to their class list.
Forms · Bootstrap v4.5[
^]
Grid system · Bootstrap v4.5[
^]