title: style bootstrap radio buttons to look like normal buttons with form validation
body: <p>I have these two radio buttons that require the user to select one of the two radio buttons. I have been trying to figure out how to style the radio buttons to look more like regular buttons. How can i style these radio buttons to look like normal buttons but keep the radio button behavior and the form validation as well? </p>
  
  <p>Also I am using bootstrap for most of my styling in case that was not clear.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Example starter JavaScript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  
  &lt;form class="needs-validation" novalidate&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="form-check"&gt;
        &lt;input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="save" required&gt;
        &lt;label class="form-check-label btn btn-outline-primary" for="save"&gt;
                              save
                          &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="form-check"&gt;
        &lt;input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="cancel" required&gt;
        &lt;label class="form-check-label btn btn-outline-danger" for="cancel"&gt;
                              cancel
                          &lt;/label&gt;
        &lt;div class="invalid-feedback"&gt;
          select one option
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;button type="submit" name="signup_signup" class="btn btn-primary btn-block" aria-describedby="signup_notes"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>