CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Saurabh Kumar Singh
Saurabh Kumar Singh

Reputation: 305

How to increase radio button size in bootstrap

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.

Upvotes: 12

Views: 49527

Answers (3)

Leon
Leon

Reputation: 644

For Bootstrap 5 and if you're using SASS
Alter these variables

// Size of Radio
$form-check-input-width: 1.5em;

// Height between
$form-check-min-height: 2.5em;

Upvotes: 1

Nims Patel
Nims Patel

Reputation: 1056

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>

Upvotes: 5

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

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>

Upvotes: 30

Related Questions