I have created a survey but the question of the survey is coming one by one. I want to put them in section-wise in a tab so they look good. Is there any bootstrap component or anything else which I can use so that the survey question looks in a better way may be a tab or something else.adding a pic to give more clearity[![enter image description here](https://i.stack.imgur.com/qgPBd.jpg)](https://i.stack.imgur.com/qgPBd.jpg)

Html Page:-

```
    <p>
  Select a radio button and click on Submit.
</p>
<div class="section-1">

  <h2>Section 1</h2>
  question 1:
  <input type="radio" name="question1" value="1">1
  <input type="radio" name="question1" value="2">2
  <input type="radio" name="question1" value="3">3

  <br> question 2:
  <input type="radio" name="question2" value="1">1
  <input type="radio" name="question2" value="2">2
  <input type="radio" name="question2" value="3">3

  <br> question 3:
  <input type="radio" name="question3" value="1">1
  <input type="radio" name="question3" value="2">2
  <input type="radio" name="question3" value="3">3

</div>
<div class="section-2">

  <h2>Section 2</h2>
  question 1:
  <input type="radio" name="question4" value="1">1
  <input type="radio" name="question4" value="2">2
  <input type="radio" name="question4" value="3">3

  <br> question 2:
  <input type="radio" name="question5" value="1">1
  <input type="radio" name="question5" value="2">2
  <input type="radio" name="question5" value="3">3
  <br> question 3:
  <input type="radio" name="question6" value="1">1
  <input type="radio" name="question6" value="2">2
  <input type="radio" name="question6" value="3">3
  <br> question 4:
  <input type="radio" name="question7" value="1">1
  <input type="radio" name="question7" value="2">2
  <input type="radio" name="question7" value="3">3
</div>
<br>

<div class="final-results"></div>
<br>

<button type="button" onclick="displayRadioValue()">
      Submit
     </button>

<div id="control" style="display: none"><a id="toemail" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to   
      email</a>&nbsp<button onclick="window.print();">Send to PDF</button></div>

```

Js page:-

```
    function displayRadioValue() {

  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let finalResults = document.querySelector('.final-results')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      section2Total += +radio.value
    }
  })

  //Final Results and validation
  if (section1Total > 0 && section2Total > 0) {
    finalResults.innerHTML += genTable(section1Question, section1Total, 1)
    finalResults.innerHTML += genTable(section2Question, section2Total, 2)
  } else {
    finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '}
    document.getElementById("control").style.display = "block";
    document.getElementById("toemail").href += document.getElementById("final-results").innerText;

  }

```

Style page:-

```
    @media print {
  body * {
    visibility: hidden;
  }
  .final-results * {
    visibility: visible;
  }
  .final-results {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

table,
table tr th,
table tr td {
  border: 1px solid black;
}

```