According to the docs you need to add the .col-form-label-sm
and .form-control-sm
classes (
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
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>