Home > Back-end >  Is there any way to make checkboxes small/big in bootstrap 5.2?
Is there any way to make checkboxes small/big in bootstrap 5.2?

Time:11-30

According to the docs you need to add the .col-form-label-sm and .form-control-sm classes (enter image description here

Just add small to the form wrapper div.

...
    <div  style="position:relative; left: 1.5ex;">
        <!-- input and label -->
    </div>
....

Original DOM structure

container
    ├── row/
    │   └── label/
    │       └── col-9/
    │           └── input
    └── row/
        └── div/
            ├── input
            └── label

enter image description here

New structure

Instead of creating another row, you can place it under the existing input field.

container
    └── row/
        └── label/
            └── col-9/
                ├── input
                └── div/
                    ├── input
                    └── label 

You do not need style="position:relative; left: 1.5ex;"

<div >
    <div >
        <!-- col left -->
        <label for="colFormLabelSm" >Email</label>
        <!-- col right -->
        <div >
            <input type="email"  id="colFormLabelSm" placeholder="col-form-label-sm">
            <div >
                <input id="id_accept" name="accept" required="" tabindex="1" type="checkbox" >
                <label for="id_accept" >Accept</label>
            </div>
        </div>
    </div>
</div>

enter image description here

  • Related