How to stylize radio buttons in Bootstrap?

Question

I am not allowed to use jquery. Only JavaScript, CSS and Bootstrap.

How do I change the default look of the radio buttons?

Here is my code so far.

"test.html"

            <div class="radio">
            <label><input type="radio" name="optradio" id="radA" onclick="storeA()">
              <p id="optionA"></p><br>
            </label>
          </div>
          <div class="radio">
            <label><input type="radio" name="optradio" id="radB" onclick="storeB()">
              <p id="optionB"></p><br>
            </label>
          </div>
          <div class="radio">
            <label><input type="radio" name="optradio" id="radC" onclick="storeC()">
              <p id="optionC"></p><br></label>
          </div>
          <div class="radio">
            <label><input type="radio" name="optradio" id="radD" onclick="storeD()">
              <p id="optionD"></p><br></label>
          </div>
          <div class="radio">
            <label><input type="radio" name="optradio" id="radE" onclick="storeE()">
              <p id="optionE"></p><br></label>
          </div>

Answer 1

The main point to keep in mind:

• Hide radios
• Generate new radio buttons, which we can style via css via pseudo elements :after or before
• Apply styles when checking the button with pseudo selector :checked

    :root {
      --color-blue: #5897fc;
      --color-blue-grayed: #e0ecff;
    }
    /* First hide radios */
    .questions input[type="radio"] {
      display: none;
    }
    
    /* Generate new radio buttons, which we can style via css */
    .questions label:before {
      content: attr(data-question-number);
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid;
      text-align: center;
      line-height: 30px;
      margin-right: 20px;
    }
    
    /* Applying styles when checking the buttons */
    .questions input[type="radio"]:checked ~ label {
      background-color: var(--color-blue-grayed);
      border-color: var(--color-blue);
    }
    
    .questions input[type="radio"]:checked ~ label:before {
      background-color: var(--color-blue);
      border-color: var(--color-blue);
      color: white;
    }
    
    .questions label {
      display: block;
      cursor: pointer;
      
      padding: 10px;
      margin-bottom: 10px;
      background-color: white;
      border: 2px solid white;
      border-radius: 15px;
    }
    
    .questions {
      background-color: gray;
      padding: 20px;
    }

  <div class="questions">
      <div class="questions__question">
        <input type="radio" name="answer" id="answer-1">
        <label for="answer-1" data-question-number="1">Car</label>
      </div>
      <div class="questions__question">
        <input type="radio" name="answer" id="answer-2"> 
        <label for="answer-2" data-question-number="2">Kralj</label>
      </div>
      <div class="questions__question">
        <input type="radio" name="answer" id="answer-3">
        <label for="answer-3" data-question-number="3">Faca</label>
      </div>
    </div>