How to increase radio button size in bootstrap

Question

How do increase the default size of my radio buttons given by bootstrap? Here is fiddle link https://jsfiddle.net/thomassuckow/a815d1yz/

html
    <form >
        <div class="row">
            <div class="col-sm-3">Test 1 - Bootstrap</div>
            <div class="col-sm-9">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default active">
                        <input type="radio" id="q156" name="quality[25]" value="1" checked="checked" /> Normal
                    </label> 
                    <label class="btn btn-default">
                        <input type="radio" id="q157" name="quality[25]" value="2" /> History
                    </label>
                </div>
            </div>
        </div>
    </form>

I have used the required bootsrap js, css and fonts.

Answer 1

You can increase height and width.

input[type=radio] {
    width: 30px;
    height: 30px;
}

Or you can use transform scale

input[type=radio]{
  transform:scale(1.5);
}

label:first-child input[type=radio] {
  width: 30px;
  height: 30px;
}

label:last-child input[type=radio] {
  transform: scale(1.5);
}

<form>
  <div class="row">
    <div class="col-sm-3">Test 1 - Bootstrap</div>
    <div class="col-sm-9">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default active">
          <input type="radio" id="q156" name="quality[25]" value="1" checked="checked" /> Normal
        </label>
        <label class="btn btn-default">
          <input type="radio" id="q157" name="quality[25]" value="2" />History
          </label>
      </div>
    </div>
  </div>
</form>

Answer 2

Add css radio button #id in transform:scale(..)

input#q156 {
   transform: scale(2);
}

input#q156 {
   transform: scale(2);
}

<form>
  <div class="row">
    <div class="col-sm-3">Test 1 - Bootstrap</div>
    <div class="col-sm-9">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default active">
          <input type="radio" id="q156" name="quality[25]" value="1" checked="checked" /> Normal
        </label>
        <label class="btn btn-default">
          <input type="radio" id="q157" name="quality[25]" value="2" />History
          </label>
      </div>
    </div>
  </div>
</form>