bootstrap toggle with width 100%

Question

I'm using bootstrap toggle plugin link and I'd like to know how can set the width 100% like btn-block to occupy the all space of the parent element. Now I can set the with only with px value.

$('.toggle').bootstrapToggle({
    on: 'Y',
    off: 'N',
    width: ONLY FIXED SIZE IN PX,
    size: 'small'
});

I tried to create a custom class for this but without success.

<div class="row">
    <div class="col-md-2">
        <input type="checkbox" class="toggle" name="cb1" value="1">
    </div>
    <div class="col-md-3">
        <input type="checkbox" class="toggle" name="cb2" value="1">
    </div>
    <div class="col-md-4">
        <input type="checkbox" class="toggle" name="cb3" value="1">
    </div>
</div>

How could I do? Thank you

Answer 1

You can directly give the width in % metrics as well and not just fixed px. So you can change the code to make it look like this.

$('.toggle').bootstrapToggle({
    on: 'Y',
    off: 'N',
    width: '100%',
    size: 'small'
});

Alternatively you can remove the width parameter from the .bootstrapToggle() method and use it in the HTML as well like so.

<input type="checkbox" class="toggle" name="cb1" value="1" data-width="100%">