Отображение переключателя переключателя Bootstrap с радиокружками

Question

Я создаю форму пожертвования, в которой есть 2 способа пожертвования: разовое пожертвование или повторное пожертвование.Это отображается в 2 столбцах, причем каждый столбец содержит переключатели радио с назначенными суммами и вводом для «другой» суммы.

Поскольку пользователь может выбрать только одну опцию, у меня есть div с data-toggle="buttons", обернутым вокруг обоих столбцов.

Кнопки переключаются правильно, но теперь отображаются кружки радиовхода.

Вот фрагмент кода, показывающий проблему:

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');		

.amt-section{
	padding: 20px 50px;
	
 }

#amt-msg-wrapper{
	background-color: #337ab7;
	color: #fff;
	padding: 20px 10px 10px 10px;
	margin-bottom: 20px;
}

#amt-msg{
	font-size: 1.3em;
	font-weight: 400;	
	text-align: center;
}
		
#one-time{
	background-color: #c0c0c0;
}
		
#recur{
	background-color: #f0f0f0;
}
		
#one-time, #recur {
	padding-bottom: 50px;
}

.amt-section h3{
	text-align: center;
 }
		  
.btn-group-justified{
  display: table;
}
		  

.blocks .btn-primary {
    padding: 12px 0px;
    border-radius: 0;
}
		  
.blocks {
	border-spacing: 10px 5px;
}
			 
/*****style other inputs*****/
			 
			 
#other-wrapper, #other-recur-wrapper{
padding-top: 6px;
 width: 100%;
 margin: auto;
/* background-color: red; */
 text-align: center;
}
			 
#btn-other, #btn-recur-other{
 float: none;
 padding: 10px 10px;
}		
		

.btn.btn-primary.active{
	background-color: orange!important;
}

   <div data-toggle="buttons">
			
          <div id="amt-wrapper" class="row">
            <div id="one-time" class="col-lg-6 col-md-12 col-sm-12 col-xs-12 amt-section">
              <h3>One-Time Donation</h3>
              
              <!-- <div data-toggle="buttons"> -->
              
              <div class="btn-group blocks btn-group-justified" >
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="25.00" autocomplete="off">
                  $25.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="50.00" autocomplete="off" >
                  $50.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="75.00" autocomplete="off">
                  $75.00 </label>
              </div>
              <div class="btn-group blocks btn-group-justified">
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="600.00" autocomplete="off">
                  $600.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="1000.00" autocomplete="off">
                  $1000.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="3600.00" autocomplete="off">
                  $3600.00 </label>
              </div>
              <div id="other-wrapper" class="btn-group blocks">
                <label id="btn-other" class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="other">
                  Other Amount </label>
                <!--<input name="OtherAmount" type="text" placeholder="Other"> -->
                <input id="txtOther" name="OtherAmount" type="text" placeholder="Enter amount as 0.00">
              </div>
              
              <!--    </div><!--End data-toggle div --> 
              
            </div>
            <!-- end one-time -->
            
            <div id="recur" class="col-lg-6 col-md-12 col-sm-12 col-xs-12 amt-section">
              <h3>Donate Monthly</h3>
              
              <!--<div data-toggle="buttons">-->
              
              <div class="btn-group blocks btn-group-justified" >
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="$25.00">
                  $25.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="$50.00">
                  $50.00 </label>
              </div>
              <div class="btn-group blocks btn-group-justified" >
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="$84.00">
                  $84.00 </label>
                <label class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="$300.00">
                  $300.00 </label>
              </div>
              <div id="other-recur-wrapper" class="btn-group blocks">
                <label id="btn-recur-other" class="btn btn-primary donate-btn">
                  <input type="radio" name="RadioAmount" value="other">
                  Other Amount </label>
                <!--<input name="OtherAmount" type="text" placeholder="Other"> -->
                <input id="txt-recur-other" name="OtherAmount" type="text" placeholder="Enter amount as 0.00">
              </div>
              
              <!--	  </div> <!-- End data toggle --> 
              
            </div>
            <!-- end recur --> 
            
          </div>
          <!-- end amt-wrapper --> 
          
        </div>
        <!-- End data toggle --> 
        
        <!-- Begin Amount Selected Message -->
        <div id="amt-msg-wrapper" class="row">
          <div class="col-sm-12 col-md-12 col-lg-12">
            <p id="amt-msg"> Your gift of any amount will help to bless Pittsburgh's most vulnerable children. </p>
          </div>
        </div>

Надеюсь, это имеет смысл!Любая помощь будет наиболее ценной.:)