<form>
<div class="form-check">
<input type="radio" class="form-check-input" id="male" name="gender" />
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="female" name="gender" />
<label class="form-check-label" for="female">Female</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="disabled" disabled name="gender" />
<label class="form-check-label" for="disabled">Disabled</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="disabled-checked" disabled checked name="gender" />
<label class="form-check-label" for="disabled-checked">Default</label>
</div>
</form>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
View Compiled
This Pen doesn't use any external JavaScript resources.