Radio Button

Radio Button
Radio Button With Label
Radio Button Group Vertical
Radio Button Group Horizontal
Copy 
  
 
<div class="row">
   <div class="col-lg-6">
      <div class="card">
   <div class="card-body">
   <h5 class="card-title">Radio Button</h5>
   <div class="col-sm-10">
     <div class="form-check">
       <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked="">
     </div>
     <div class="form-check">
       <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
     </div>  
   </div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Radio Button With Label</h5>
<div class="col-sm-10">
 <div class="form-check">
   <input class="form-check-input" type="radio" name="grid-Radios" id="gridRadios3" value="option1" checked="">
   <label class="form-check-label" for="gridRadios3">
     First radio
   </label>
 </div>
 <div class="form-check">
   <input class="form-check-input" type="radio" name="grid-Radios" id="gridRadios4" value="option2">
   <label class="form-check-label" for="gridRadios4">
     Second radio
   </label>
 </div>
</div>
</div>
</div>
</div>

<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Radio Button Group Vertical</h5>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="grid-Radios-btn" id="gridRadios5" value="option1" checked="">
<label class="form-check-label" for="gridRadios5">
 First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="grid-Radios-btn" id="gridRadios6" value="option2">
<label class="form-check-label" for="gridRadios6">
 Second radio
</label>
</div>

<div class="form-check disabled">
 <input class="form-check-input" type="radio" name="grid-Radios-btn" id="gridRadios7" value="option">
 <label class="form-check-label" for="gridRadios7">
   Third radio
 </label>
</div>
</div>
</div>
</div>
</div>




<div class="col-lg-6">
<div class="card">
<div class="card-body min-height">
<h5 class="card-title">Radio Button Group Horizontal</h5>
<div class="col-sm-10">


<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">Option 1 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">Option 2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
<label class="form-check-label" for="inlineRadio3">Option 3</label>
</div>
</div>
</div>
</div>
</div>


</div>
Copy 
                                       
.form-check {
   display: block;
   min-height: 1.5rem;
   padding-left: 1.5em;
   margin-bottom: 0.125rem;
}
.form-check-input:checked[type=radio] {
   background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e);
}
.form-check-input:checked {
   background-color: #167DF5;
   border-color: #167DF5;
}

element.style {
}
.form-check-input:checked[type=radio] {
   background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e);
}
.form-check-input:checked {
   background-color: #167DF5;
   border-color: #167DF5;
}
.form-check-input:checked {
   background-color: #0d6efd;
   border-color: #0d6efd;
}
.form-check-input[type=radio] {
   border-radius: 50%;
}
.form-check .form-check-input {
   float: left;
   margin-left: -1.5em;
}

.form-check-input {
   width: 1em;
   height: 1em;
   margin-top: 0.25em;
   vertical-align: top;
   background-color: #fff;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   border: 1px solid rgba(0,0,0,.25);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   -webkit-print-color-adjust: exact;
   color-adjust: exact;
   print-color-adjust: exact;
}