CODEWITHSUNDEEP
bootstrap-4radio-buttonalignment
Zonouzi
Zonouzi

Reputation: 101

pure bootstrap 4 radio button with their label on top of them and row aligned with their legend

I want to know if it is possible to have a form exactly like the following layout, with pure bootstrap 4, or I have to use CSS and how. I have searched, but all where on other elements. layout of the radio button form

thanks in advance

Upvotes: 0

Views: 558

Answers (1)

Arleigh Hix
Arleigh Hix

Reputation: 10877

You can easily modify a table to match your desired layout utilizing bootstrap utility classes:

The following was accomplished only having to override border-color:

tr.border-bottom {
  border-color: black !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <form>
        <table class="table">
          <tr class="text-center">
            <td class="col">
              <!-- makes this column grow -->
            </td>
            <th>header text</th>
            <th>header text</th>
            <th>header text</th>
            <th>header text</th>
            <th>header text</th>
          </tr>

          <tr class="text-center border-bottom">
            <td class="text-left border-0 p-0">1. legend</td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
          </tr>

          <tr class="text-center border-bottom">
            <td class="text-left border-0 p-0">1. legend</td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions