Radio buttons are rendering on top of rest of form - django

Question

I'm using vanilla bootstrap with Python on Django. I've configured a form with radio buttons, however the buttons render on top of the fields as shown in the screenshot below.
I've notice that Django puts the radio buttons into a list and I thought that could be the cause, so I tried using CSS to disable the tag but the radio buttons still float on top just without the list bullets.
Forms.py
class MerchantGroupForm(forms.Form):
DO_WHAT_CHOICES=[('merge','Merge'),
('update','Update')]
#do_what = forms.ChoiceField(choices=DO_WHAT_CHOICES, widget=forms.RadioSelect(attrs={'class': "custom-radio-list"}))
do_what = forms.ChoiceField(choices=DO_WHAT_CHOICES, widget=forms.RadioSelect)
merge_merchantgroup = forms.ModelChoiceField(required=False, queryset=MerchantGroup.objects.all().order_by('name'), empty_label="Merge with")
name = forms.CharField(required=False)
default_ledger = GroupedModelChoiceField(required=False, queryset=Ledger.objects.all().order_by('coa_sub_group__name','name'), choices_groupby = 'coa_sub_group')
disable_AI = forms.BooleanField(required=False, label='Disable AI')
<form action="/monzo/merchantgroups/update/799/" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="ZWtsz3JDsnUtu1mj6NO3SDlBuyJyEpDgbZUDC6elfTPK2DCwWevD2BpirSZJOhiM">
<div class="form-group">
<label for="id_do_what_0">Do what:</label>
<ul id="id_do_what" class="custom-radio-list form-control">
<li><label for="id_do_what_0"><input type="radio" name="do_what" value="merge" class="custom-radio-list form-control" required id="id_do_what_0">
Merge</label>
</li>
<li><label for="id_do_what_1"><input type="radio" name="do_what" value="update" class="custom-radio-list form-control" required id="id_do_what_1">
Update</label>
</li>
</ul>
</div>
<div class="form-group">
<label for="id_merge_merchantgroup">Merge merchantgroup:</label>
<select name="merge_merchantgroup" class="form-control" id="id_merge_merchantgroup">
<option value="" selected>Merge with</option>
<option value="203">ATM</option>
<option value="799">Amazon</option>
<option value="200">Post Office</option>
<option value="201">Virgin Media</option>
<option value="202">www.modelsport.co.uk</option>
</select>
</div>
<div class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" value="Amazon" class="form-control" id="id_name">
</div>
<div class="form-group">
<label for="id_default_ledger">Default ledger:</label>
<select name="default_ledger" class="form-control" id="id_default_ledger">
<option value="">---------</option>
<optgroup label="Accounts">
<option value="20">Jacks Account</option>
<option value="32">Jacks Monzo</option>
<option value="21">Janes Account</option>
<option value="126">Janes Monzo</option>
<option value="22">Joint Account</option>
</optgroup>
<optgroup label="Bills">
<option value="7">Council tax</option>
<option value="6">Electricity & Gas</option>
</optgroup>
<optgroup label="Cash">
<option value="23">Jacks Float</option>
<option value="24">Janes Float</option>
</optgroup>
<optgroup label="Food & Home">
<option value="8">Basic food</option>
<option value="9">Coffee & Snacks</option>
<option value="11">Home Supplies</option>
<option value="10">Take away</option>
</optgroup>
</optgroup>
<optgroup label="Property">
<option value="19">Property</option>
</optgroup>
<optgroup label="Purchases">
<option value="31">Computer & Electrical</option>
<option value="30">Hobbies</option>
<option value="29" selected>Toys</option>
</optgroup>
<optgroup label="Reserves">
<option value="27">Profit & Loss Accounts</option>
</optgroup>
<optgroup label="Taxation">
<option value="5">Income tax</option>
</optgroup>
<optgroup label="Taxation">
<option value="25">Tax Liability</option>
</optgroup>
<optgroup label="Travel">
<option value="17">Public Transport</option>
<option value="18">Taxis</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label for="id_disable_AI">Disable AI:</label>
<input type="checkbox" name="disable_AI" class="form-control" id="id_disable_AI" checked>
</div>
<input type="submit" class="btn btn-primary">
</form>

Answer 1

If the screenshot you showed have template the previous .html code then Django does nothing because you don't use Django form to render your form. It's just a plain HTML/Bootstrap form.
This is how to use Django Form.
Also if you want to Group radios on the same horizontal row with Bootstrap then you can add .form-check-inline to any .form-check as Bootstrap inline radio button page says.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="merge"
value="merge">
<label class="form-check-label" for="merge">Merge</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="update"
value="update">
<label class="form-check-label" for="update">update</label>
</div>
NB : I think that your first .form-group is not well structured.
You can visit Bootstrap form to do it fine.

Answer 2

Removing the form-control class did the trick. According to Bootstrap docs this class is only for certain fields, guess radio is not one of them.