Seeking assistance for a bootstrap checkbox button behavior. Currently, the text on the button changes when clicked, but I would like to set a fixed width for the button regardless of the text length and center the text inside it after clicking. Any guidance on achieving this would be appreciated.
For reference, here is my code on JSFIDDLE
$('#option1').on('click',function(){
$(this).closest('label').find('span').html('Nice');
});@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> <span> CLICK ME</span>
</label>
</div>