Question 192764 in Html Question posted in
Some basic documentation can be found here.

Html – How to align checkboxes in columns horizontally

My question stems from this

I would like to align my checkboxes horizontally in 4 columns

<html lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>TEST</title>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </head>
  <body>
     <div class="row">
        <div class="col-md-12">
            <form action='' method="POST" novalidate>
                <div>
                    <div>
                        <label>GROUP 1</label>
                        <div style="display: table;">
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_1" name="0_1">
                        <label for="0_1">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_2" name="0_2">
                        <label for="0_2">CK1_2</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_3</label>
                          </div>
                    </div>
                    </div>
            <br/>
                    <div>
                        <label>GROUP 2</label>
                        <div style="display: table;">
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_1" name="1_1">
                        <label for="1_1">CK2_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_2" name="1_2">
                        <label for="1_2">CK2_2</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_3" name="1_3">
                        <label for="1_3">CK2_3</label>
                          </div>
                        </div>
                    </div>
                </div>       
         </form>
        </div>
     </div>
  </body>
</html>

The problem is that when I have more than 10 checkboxes, they align correctly with the labels, but for less checkboxes, as you can see in the snippet above, the rendering is not harmonious

<html lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>TEST</title>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </head>
  <body>
     <div class="row">
        <div class="col-md-12">
            <form action='' method="POST" novalidate>
                <div>
                    <div>
                        <label>GROUP 1</label>
                        <div style="display: table;">
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_1" name="0_1">
                        <label for="0_1">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_2" name="0_2">
                        <label for="0_2">CK1_2</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_3</label>
                          </div>
                          
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="0_3" name="0_3">
                        <label for="0_3">CK1_1</label>
                          </div>
                        </div>
                    </div>
                    <div>
                        <label>GROUP 2</label>
                        <div style="display: table;">
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_1" name="1_1">
                        <label for="1_1">CK2_1</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_2" name="1_2">
                        <label for="1_2">CK2_2</label>
                          </div>
                          <div style="width:25%; display: inline-table; margin: 5px 0;">
                            <input type="checkbox" id="1_3" name="1_3">
                        <label for="1_3">CK2_3</label>
                          </div>
                        </div>
                    </div>
                </div>       
                </form>
        </div>
     </div>
  </body>
</html>
Tags:

2

Answers


  1. 0

    You can use the grid display.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            gap: 10px;
        }

        .content {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
        <div class="content">
            <input type="checkbox" name="check" id="check">
            <label for="check">Checkbox</label>
        </div>
    </div>
</body>
</html>

    If this is not what you’re looking for, let me know. I’ll be happy to help.

    Login or Signup to reply.
  2. 0

    You can use Flexbox. When the flex-direction is column you can limit the height of the container (here max-height: 10em) and the items (<label>) will start to form columns.

    fieldset {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 10em;
  border: none;
  gap: .5em;
  margin: 0;
}

legend {
  font-weight: bold;
}
    <form name="form01">
  <fieldset name="group1">
    <legend>Group 1</legend>
    <label><input type="checkbox" name="check1">Checkbox 1</label>
    <label><input type="checkbox" name="check2">Checkbox 2</label>
    <label><input type="checkbox" name="check3">Checkbox 3</label>
    <label><input type="checkbox" name="check4">Checkbox 4</label>
    <label><input type="checkbox" name="check5">Checkbox 5</label>
    <label><input type="checkbox" name="check6">Checkbox 6</label>
    <label><input type="checkbox" name="check7">Checkbox 7</label>
    <label><input type="checkbox" name="check8">Checkbox 8</label>
    <label><input type="checkbox" name="check9">Checkbox 9</label>
  </fieldset>
  <fieldset name="group2">
    <legend>Group 2</legend>
    <label><input type="checkbox" name="check10">Checkbox 10</label>
    <label><input type="checkbox" name="check11">Checkbox 11</label>
    <label><input type="checkbox" name="check12">Checkbox 12</label>
  </fieldset>
</form>

    You can also arrange items in a row. This is a very flexible and you don’t need to specify a height.

    fieldset {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: none;
  gap: .5em;
  margin: 0;
}

legend {
  font-weight: bold;
}
    <form name="form01">
  <fieldset name="group1">
    <legend>Group 1</legend>
    <label><input type="checkbox" name="check1">Checkbox 1</label>
    <label><input type="checkbox" name="check2">Checkbox 2</label>
    <label><input type="checkbox" name="check3">Checkbox 3</label>
    <label><input type="checkbox" name="check4">Checkbox 4</label>
    <label><input type="checkbox" name="check5">Checkbox 5</label>
    <label><input type="checkbox" name="check6">Checkbox 6</label>
    <label><input type="checkbox" name="check7">Checkbox 7</label>
    <label><input type="checkbox" name="check8">Checkbox 8</label>
    <label><input type="checkbox" name="check9">Checkbox 9</label>
  </fieldset>
  <fieldset name="group2">
    <legend>Group 2</legend>
    <label><input type="checkbox" name="check10">Checkbox 10</label>
    <label><input type="checkbox" name="check11">Checkbox 11</label>
    <label><input type="checkbox" name="check12">Checkbox 12</label>
  </fieldset>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search