form-check-inline in bootstrap 5

To align the gender radio buttons inline, you can use Bootstrap's form-check-inline class. Here's the modified code:

<!-- Gender Radio Buttons -->
<div class="mb-3">
    <label class="form-label">Gender</label>
    <div class="d-flex">
        <div class="form-check form-check-inline">
            <asp:RadioButton ID="rbMale" runat="server" GroupName="Gender" CssClass="form-check-input" />
            <label class="form-check-label" for="rbMale">Male</label>
        </div>
        <div class="form-check form-check-inline">
            <asp:RadioButton ID="rbFemale" runat="server" GroupName="Gender" CssClass="form-check-input" />
            <label class="form-check-label" for="rbFemale">Female</label>
        </div>
    </div>
</div>

Explanation: form-check-inline: This makes the radio buttons appear side by side instead of stacking them vertically. d-flex: Ensures proper alignment of the radio buttons within a flex container.