(Checks & Radios) چک‌ها و رادیوها

چک‌ها 
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
        پیش فرض checkbox
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked"
        checked>
    <label class="form-check-label" for="flexCheckChecked">
        بررسی شد checkbox
    </label>
</div>
غیرفعال 
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled"
        disabled="">
    <label class="form-check-label" for="flexCheckDisabled">
        غیرفعال checkbox
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value=""
        id="flexCheckCheckedDisabled" checked="" disabled="">
    <label class="form-check-label" for="flexCheckCheckedDisabled">
        غیرفعال بررسی شد checkbox
    </label>
</div>
رادیوها 
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault"
        id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
        پیش فرض radio
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault"
        id="flexRadioDefault2" checked="">
    <label class="form-check-label" for="flexRadioDefault2">
        پیش فرض بررسی شد radio
    </label>
</div>
غیرفعال 
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDisabled"
        id="flexRadioDisabled" disabled="">
    <label class="form-check-label" for="flexRadioDisabled">
        غیرفعال radio
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDisabled"
        id="flexRadioCheckedDisabled" checked="" disabled="">
    <label class="form-check-label" for="flexRadioCheckedDisabled">
        غیرفعال بررسی شد radio
    </label>
</div>
پیش‌فرض (چیده‌شده) 
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
        پیش فرض checkbox
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2"
        disabled="">
    <label class="form-check-label" for="defaultCheck2">
        غیرفعال checkbox
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios"
        id="exampleRadios1" value="option1" checked="">
    <label class="form-check-label" for="exampleRadios1">
        پیش فرض radio
    </label>
</div>
<div class="form-check mb-0">
    <input class="form-check-input" type="radio" name="exampleRadios"
        id="exampleRadios3" value="option3" disabled="">
    <label class="form-check-label" for="exampleRadios3">
        غیرفعال radio
    </label>
</div>
سوئیچ‌ها 
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch"
        id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">switch پیش فرض
        ورودی checkbox</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch"
        id="flexSwitchCheckChecked" checked="">
    <label class="form-check-label" for="flexSwitchCheckChecked">switch بررسی شده
        ورودی checkbox</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch"
        id="flexSwitchCheckDisabled" disabled="">
    <label class="form-check-label" for="flexSwitchCheckDisabled">غیرفعال
        switch
        ورودی checkbox</label>
</div>
<div class="form-check form-switch mb-0">
    <input class="form-check-input" type="checkbox" role="switch"
        id="flexSwitchCheckCheckedDisabled" checked="" disabled="">
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">غیرفعال ورودی checkbox switch علامت دار</label>
</div>
اندازه‌های چک‌باکس 
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkebox-sm" checked="">
    <label class="form-check-label" for="checkebox-sm">
        پیش فرض
    </label>
</div>
<div class="form-check form-check-md d-flex align-items-center">
    <input class="form-check-input" type="checkbox" value="" id="checkebox-md" checked="">
    <label class="form-check-label" for="checkebox-md">
        متوسط
    </label>
</div>
<div class="form-check form-check-lg d-flex align-items-center">
    <input class="form-check-input" type="checkbox" value="" id="checkebox-lg" checked="">
    <label class="form-check-label" for="checkebox-lg">
        بزرگ
    </label>
</div>
اندازه‌های رادیو 
<div class="form-check">
    <input class="form-check-input" type="radio" name="Radio" id="Radio-sm">
    <label class="form-check-label" for="Radio-sm">
        پیش فرض
    </label>
</div>
<div class="form-check form-check-md">
    <input class="form-check-input" type="radio" name="Radio" id="Radio-md">
    <label class="form-check-label" for="Radio-md">
        متوسط
    </label>
</div>
<div class="form-check form-check-lg">
    <input class="form-check-input" type="radio" name="Radio" id="Radio-lg" checked="">
    <label class="form-check-label" for="Radio-lg">
        بزرگ
    </label>
</div>
اندازه‌های سوئیچ 
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch"
        id="switch-sm">
    <label class="form-check-label" for="switch-sm">پیش فرض</label>
</div>
<div class="form-check form-check-md form-switch">
    <input class="form-check-input" type="checkbox" role="switch"
        id="switch-md">
    <label class="form-check-label" for="switch-md">متوسط</label>
</div>
<div class="form-check form-check-lg form-switch">
    <input class="form-check-input" type="checkbox" role="switch"
        id="switch-lg">
    <label class="form-check-label" for="switch-lg">بزرگ</label>
</div>
درون‌خطی (Inline) 
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1"
        value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2"
        value="option2">
    <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3"
        value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">3 (غبرفعال)</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions"
        id="inlineRadio1" value="option1">
    <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions"
        id="inlineRadio2" value="option2">
    <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions"
        id="inlineRadio3" value="option3" disabled>
    <label class="form-check-label" for="inlineRadio3">3 (غبرفعال)</label>
</div>
بدون برچسب (Without labels) 
<span class="me-3">
    <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value=""
        aria-label="...">
</span>
<span>
    <input class="form-check-input" type="radio" name="radioNoLabel"
        id="radioNoLabel1" value="" aria-label="...">
</span>
معکوس (Reverse) 
<div class="form-check form-check-reverse mb-3">
    <input class="form-check-input" type="checkbox" value=""
        id="reverseCheck1">
    <label class="form-check-label" for="reverseCheck1">
        چک‌باکس معکوس
    </label>
</div>
<div class="form-check form-check-reverse mb-3">
    <input class="form-check-input" type="checkbox" value=""
        id="reverseCheck2" disabled="">
    <label class="form-check-label" for="reverseCheck2">
        چک‌باکس معکوس غیرفعال
    </label>
</div>

<div class="form-check form-switch form-check-reverse">
    <input class="form-check-input" type="checkbox"
        id="flexSwitchCheckReverse">
    <label class="form-check-label" for="flexSwitchCheckReverse">چک‌باکس سوئیچ معکوس</label>
</div>
استایل‌های دارای حاشیه (Outlined) 


<input type="checkbox" class="btn-check" id="btn-check-outlined">
<label class="btn btn-outline-primary mb-3" for="btn-check-outlined">Single
    toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked
    >
<label class="btn btn-outline-secondary mb-3"
    for="btn-check-2-outlined">Checked</label><br>

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined"
    checked>
<label class="btn btn-outline-success m-1" for="success-outlined">Checked success
    radio</label>

<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined"
    >
<label class="btn btn-outline-danger m-1" for="danger-outlined">Danger radio</label>
دکمه‌های رادیویی قابل تغییر (Radio Toggle Buttons) 
<input type="radio" class="btn-check" name="options" id="option1"
    checked="">
<label class="btn btn-primary m-1" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2"
>
<label class="btn btn-primary m-1" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3"
disabled="">
<label class="btn btn-primary m-1" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4"
>
<label class="btn btn-primary m-1" for="option4">Radio</label>
دکمه‌های قابل تغییر چک‌باکس (Checkbox Toggle Buttons) 
<input type="checkbox" class="btn-check" id="btn-check">
    <label class="btn btn-primary m-1" for="btn-check">Single toggle</label>
    <input type="checkbox" class="btn-check" id="btn-check-2" checked
       >
    <label class="btn btn-primary m-1" for="btn-check-2">Checked</label>
    <input type="checkbox" class="btn-check" id="btn-check-3"
        disabled>
    <label class="btn btn-primary m-1" for="btn-check-3">Disabled</label>
چک‌باکس‌های رنگی 
<div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" value="" id="primaryChecked" checked="">
    <label class="form-check-label" for="primaryChecked">
        Primary
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-secondary" type="checkbox" value="" id="secondaryChecked" checked="">
    <label class="form-check-label" for="secondaryChecked">
        Secondary
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-warning" type="checkbox" value="" id="warningChecked" checked="">
    <label class="form-check-label" for="warningChecked">
        Warning
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-info" type="checkbox" value="" id="infoChecked" checked="">
    <label class="form-check-label" for="infoChecked">
        Info
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-success" type="checkbox" value="" id="successChecked" checked="">
    <label class="form-check-label" for="successChecked">
        Success
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-danger" type="checkbox" value="" id="dangerChecked" checked="">
    <label class="form-check-label" for="dangerChecked">
        Danger
    </label>
</div>
<div class="form-check mb-0">
    <input class="form-check-input form-checked-dark" type="checkbox" value="" id="darkChecked" checked="">
    <label class="form-check-label" for="darkChecked">
        Dark
    </label>
</div>
چک‌باکس‌های با حاشیه 
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline" type="checkbox" value="" id="primaryoutlineChecked" checked="">
    <label class="form-check-label" for="primaryoutlineChecked">
        Primary
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline form-checked-secondary" type="checkbox" value="" id="secondaryoutlineChecked" checked="">
    <label class="form-check-label" for="secondaryoutlineChecked">
        Secondary
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline form-checked-warning" type="checkbox" value="" id="warningoutlineChecked" checked="">
    <label class="form-check-label" for="warningoutlineChecked">
        Warning
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline form-checked-info" type="checkbox" value="" id="infooutlineChecked" checked="">
    <label class="form-check-label" for="infooutlineChecked">
        Info
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline form-checked-success" type="checkbox" value="" id="successoutlineChecked" checked="">
    <label class="form-check-label" for="successoutlineChecked">
        Success
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline form-checked-danger" type="checkbox" value="" id="dangeroutlineChecked" checked="">
    <label class="form-check-label" for="dangeroutlineChecked">
        Danger
    </label>
</div>
<div class="form-check mb-0">
    <input class="form-check-input form-checked-outline form-checked-dark" type="checkbox" value="" id="darkoutlineChecked" checked="">
    <label class="form-check-label" for="darkoutlineChecked">
        Dark
    </label>
</div>
رادیوهای رنگی 
<div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="primaryRadio" id="primaryRadio" checked="">
    <label class="form-check-label" for="primaryRadio">
        Primary
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-secondary" type="radio" name="secondaryRadio" id="secondaryRadio" checked="">
    <label class="form-check-label" for="secondaryRadio">
        Secondary
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-warning" type="radio" name="warningRadio" id="warningRadio" checked="">
    <label class="form-check-label" for="warningRadio">
        Warning
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-info" type="radio" name="InfoRadio" id="InfoRadio" checked="">
    <label class="form-check-label" for="InfoRadio">
        Info
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-success" type="radio" name="successRadio" id="successRadio" checked="">
    <label class="form-check-label" for="successRadio">
        Success
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-danger" type="radio" name="dangerRadio" id="dangerRadio" checked="">
    <label class="form-check-label" for="dangerRadio">
        Danger
    </label>
</div>
<div class="form-check mb-0">
    <input class="form-check-input form-checked-dark" type="radio" name="darkRadio" id="darkRadio" checked="">
    <label class="form-check-label" for="darkRadio">
        Dark
    </label>
</div>
رادیوهای حاشیه‌ای 
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline" type="radio" name="primaryoutlineRadio" id="primaryoutlineRadio" checked="">
    <label class="form-check-label" for="primaryoutlineRadio">
        Primary
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline form-checked-secondary" type="radio" name="secondaryoutlineRadio" id="secondaryoutlineRadio" checked="">
    <label class="form-check-label" for="secondaryoutlineRadio">
        Secondary
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline form-checked-warning" type="radio" name="warningoutlineRadio" id="warningoutlineRadio" checked="">
    <label class="form-check-label" for="warningoutlineRadio">
        Warning
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline form-checked-info" type="radio" name="InfooutlineRadio" id="InfooutlineRadio" checked="">
    <label class="form-check-label" for="InfooutlineRadio">
        Info
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline form-checked-success" type="radio" name="successoutlineRadio" id="successoutlineRadio" checked="">
    <label class="form-check-label" for="successoutlineRadio">
        Success
    </label>
</div>
<div class="form-check mb-2">
    <input class="form-check-input form-checked-outline form-checked-danger" type="radio" name="dangeroutlineRadio" id="dangeroutlineRadio" checked="">
    <label class="form-check-label" for="dangeroutlineRadio">
        Danger
    </label>
</div>
<div class="form-check mb-0">
    <input class="form-check-input form-checked-outline form-checked-dark" type="radio" name="darkoutlineRadio" id="darkoutlineRadio" checked="">
    <label class="form-check-label" for="darkoutlineRadio">
        Dark
    </label>
</div>
تغییر رنگ سوئیچ‌ها 
<div class="form-check form-switch mb-2">
    <input class="form-check-input" type="checkbox" role="switch"
        id="switch-primary" checked="">
    <label class="form-check-label" for="switch-primary">Primary</label>
</div>
<div class="form-check form-switch mb-2">
    <input class="form-check-input form-checked-secondary" type="checkbox" role="switch"
        id="switch-secondary" checked="">
    <label class="form-check-label" for="switch-secondary">Secondary</label>
</div>
<div class="form-check form-switch mb-2">
    <input class="form-check-input form-checked-warning" type="checkbox" role="switch"
        id="switch-warning" checked="">
    <label class="form-check-label" for="switch-warning">Warning</label>
</div>
<div class="form-check form-switch mb-2">
    <input class="form-check-input form-checked-info" type="checkbox" role="switch"
        id="switch-info" checked="">
    <label class="form-check-label" for="switch-info">Info</label>
</div>
<div class="form-check form-switch mb-2">
    <input class="form-check-input form-checked-success" type="checkbox" role="switch"
        id="switch-success" checked="">
    <label class="form-check-label" for="switch-success">Success</label>
</div>
<div class="form-check form-switch mb-2">
    <input class="form-check-input form-checked-danger" type="checkbox" role="switch"
        id="switch-danger" checked="">
    <label class="form-check-label" for="switch-danger">Danger</label>
</div>
<div class="form-check form-switch mb-0">
    <input class="form-check-input form-checked-dark" type="checkbox" role="switch"
        id="switch-dark" checked="">
    <label class="form-check-label" for="switch-dark">Dark</label>
</div>
استایل 1 سوئیچ‌های تغییر وضعیت 
<div class="row gy-1">
    <div class="col-xl-4">
        <div class="toggle on mb-3">
            <span></span>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="toggle toggle-secondary on mb-3">
            <span></span>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="toggle toggle-warning on mb-3">
            <span></span>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="toggle toggle-info on mb-3">
            <span></span>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="toggle toggle-success on mb-3">
            <span></span>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="toggle toggle-danger on mb-3">
            <span></span>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="toggle toggle-light on mb-3">
            <span></span>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="toggle toggle-dark on mb-3">
            <span></span>
        </div>
    </div>
</div>
استایل 2 سوئیچ‌های تغییر وضعیت
Primary
Secondary
Warning
Info
Success
Danger
Light
Dark 
<div class="row gy-1">
    <div class="col-xl-4 px-0">
        <div class="custom-toggle-switch d-flex align-items-center mb-4">
            <input id="toggleswitchPrimary" name="toggleswitch001" type="checkbox" checked="">
            <label for="toggleswitchPrimary" class="label-primary"></label><span class="ms-3">Primary</span>
        </div>
    </div>
    <div class="col-xl-4 px-0">
        <div class="custom-toggle-switch d-flex align-items-center mb-4">
            <input id="toggleswitchSecondary" name="toggleswitch001" type="checkbox" checked="">
            <label for="toggleswitchSecondary" class="label-secondary"></label><span class="ms-3">Secondary</span>
        </div>
    </div>
    <div class="col-xl-4 px-0">
        <div class="custom-toggle-switch d-flex align-items-center mb-4">
            <input id="toggleswitchWarning" name="toggleswitch001" type="checkbox" checked="">
            <label for="toggleswitchWarning" class="label-warning"></label><span class="ms-3">Warning</span>
        </div>
    </div>
    <div class="col-xl-4 px-0">
        <div class="custom-toggle-switch d-flex align-items-center mb-4">
            <input id="toggleswitchInfo" name="toggleswitch001" type="checkbox" checked="">
            <label for="toggleswitchInfo" class="label-info"></label><span class="ms-3">Info</span>
        </div>
    </div>
    <div class="col-xl-4 px-0">
        <div class="custom-toggle-switch d-flex align-items-center mb-4">
            <input id="toggleswitchSuccess" name="toggleswitch001" type="checkbox" checked="">
            <label for="toggleswitchSuccess" class="label-success"></label><span class="ms-3">Success</span>
        </div>
    </div>
    <div class="col-xl-4 px-0">
        <div class="custom-toggle-switch d-flex align-items-center mb-4">
            <input id="toggleswitchDanger" name="toggleswitch001" type="checkbox" checked="">
            <label for="toggleswitchDanger" class="label-danger"></label><span class="ms-3">Danger</span>
        </div>
    </div>
    <div class="col-xl-4 px-0">
        <div class="custom-toggle-switch d-flex align-items-center mb-4">
            <input id="toggleswitchLight" name="toggleswitch001" type="checkbox" checked="">
            <label for="toggleswitchLight" class="label-light"></label><span class="ms-3">Light</span>
        </div>
    </div>
    <div class="col-xl-4 px-0">
        <div class="custom-toggle-switch d-flex align-items-center mb-4">
            <input id="toggleswitchDark" name="toggleswitch001" type="checkbox" checked="">
            <label for="toggleswitchDark" class="label-dark"></label><span class="ms-3">Dark</span>
        </div>
    </div>
</div>
اندازه‌های سوئیچ تغییر وضعیت-1

سوئیچ تغییر وضعیت کوچک toggle-sm

سوئیچ تغییر وضعیت پیش‌فرض

سوئیچ تغییر وضعیت بزرگ toggle-lg

<div class="d-flex align-items-center flex-wrap mb-3">
    <div class=""> <p class="text-muted m-0">سوئیچ تغییر وضعیت کوچک <code>toggle-sm</code></p></div>
    <div class="toggle toggle-sm on mb-0">
        <span></span>
    </div>
</div>
<div class="d-flex align-items-center flex-wrap mb-3">
    <div class=""> <p class="text-muted m-0">سوئیچ تغییر وضعیت پیش‌فرض <code></code></p></div>
    <div class="toggle toggle-secondary on mb-0">
        <span></span>
    </div>
</div>
<div class="d-flex align-items-center flex-wrap">
    <div class=""> <p class="text-muted m-0">سوئیچ تغییر وضعیت بزرگ <code>toggle-lg</code></p></div>
    <div class="toggle toggle-lg toggle-success on mb-0">
        <span></span>
    </div>
</div>
اندازه‌های سوئیچ تغییر وضعیت-2

سوئیچ تغییر وضعیت کوچک toggle-sm

سوئیچ تغییر وضعیت پیش‌فرض

سوئیچ تغییر وضعیت بزرگ toggle-lg

<div class="d-flex align-items-center flex-wrap mb-4">
    <div class=""><p class="text-muted m-0">سوئیچ تغییر وضعیت کوچک <code>toggle-sm</code></p></div>
    <div class="custom-toggle-switch toggle-sm ms-2">
        <input id="size-sm" name="toggleswitchsize" type="checkbox" checked="">
        <label for="size-sm" class="label-primary"></label>
    </div>
</div>
<div class="d-flex align-items-center flex-wrap mb-4">
    <div class=""><p class="text-muted m-0">سوئیچ تغییر وضعیت پیش‌فرض</p></div>
    <div class="custom-toggle-switch ms-2">
        <input id="size-default" name="toggleswitchsize" type="checkbox" checked="">
        <label for="size-default" class="label-secondary mb-1"></label>
    </div>
</div>
<div class="d-flex align-items-center flex-wrap">
    <div class=""><p class="text-muted m-0">سوئیچ تغییر وضعیت بزرگ <code>toggle-lg</code></p></div>
    <div class="custom-toggle-switch toggle-lg ms-2">
        <input id="size-lg" name="toggleswitchsize" type="checkbox" checked="">
        <label for="size-lg" class="label-success mb-2"></label>
    </div>
</div>