Tips for organizing checkboxes in rows horizontally

Question

Tips for organizing checkboxes in rows horizontally

My question is related to this issue

I am trying to arrange my checkboxes in 4 columns horizontally

<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d56515650435262170c110c12">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd8dfd9cadbeb9e8598859b">[email protected]</a>/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>

<!-- rest of the code omitted for brevity -->
                    
                    </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>

<!-- rest of the code omitted for brevity -->

                        </div>
                    </div>
                </div>       
         </form>
        </div>
     </div>
  </body>
</html>

The challenge I'm facing is with the alignment of checkboxes when there are less than 10, which results in a non-uniform layout as shown above

<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d5d8d8c3c4c3c5d6c7f78299849987">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a677a64">[email protected]</a>/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>

<!-- rest of the code omitted for brevity -->

                        </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>

<!-- rest of the code omitted for brevity -->

                        </div>
                    </div>
                </div>       
                </form>
        </div>
     </div>
  </body>
</html>

javascript html css bootstrap-5

Answer 1

Answer №1

One way to organize your content is by using a 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>
</body>
</html>

If this solution does not meet your needs, please inform me so I can provide further assistance.

Answer 2

One way to organize your content is by using a 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>
</body>
</html>

If this solution does not meet your needs, please inform me so I can provide further assistance.

Answer 3

Answer №2

To achieve a column layout using Flexbox, set the flex-direction property to column and specify a maximum height for the container (e.g., max-height: 30vh). The items within the container will then arrange themselves in columns, but controlling the exact number of columns and item heights can be challenging.

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

legend {
  font-weight: bold;
}

label {
  width: 25%;
}

<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>

For a row layout with Flexbox, simply change the flex-direction to row without specifying a height. If each <label> has a width of 25%, you'll get four equally spaced columns.

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

legend {
  font-weight: bold;
}

label {
  width: 25%;
}

<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>

Answer 4

To achieve a column layout using Flexbox, set the flex-direction property to column and specify a maximum height for the container (e.g., max-height: 30vh). The items within the container will then arrange themselves in columns, but controlling the exact number of columns and item heights can be challenging.

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

legend {
  font-weight: bold;
}

label {
  width: 25%;
}

<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>

For a row layout with Flexbox, simply change the flex-direction to row without specifying a height. If each <label> has a width of 25%, you'll get four equally spaced columns.

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

legend {
  font-weight: bold;
}

label {
  width: 25%;
}

<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>

Tips for organizing checkboxes in rows horizontally

Answer №1

Answer №2

Similar questions

Learn the process of synchronously loading forms and data in Angular

Should objects passed as props be modified in Vue.js components?

Tips on changing the outline color by clicking

The component's width appears to be constrained by the use of display flex

How can I utilize npm with the original source code instead of minified or bundled code?

Tips for creating a stylish ReactJs Header component that stays fixed at the top of the page

Is it possible to move a directive within a limited parent element?

The function initiates without delay upon meeting the specified condition

CSS3 Arrow missing from display

Include a hyperlink to a website that was created with the help of Photoshop

When using AngularJS, encountered an issue where a view was not updating with new data from a $http request

Is it possible to convert the useMemo function into a useReducer hook implementation?

Do we need to use aria-labelledby if we already have label and input associated with "for" and "id"?

Vue.js - Axios Get request received an object response

Do ES6 features get transpiled into ES5 when utilized in TypeScript?

Nested elements not transitioning using CSS

Troubleshooting React/Jest issues with updating values in Select elements on onChange event

The AbortController feature does not initiate the cancellation of an axios.get request

I'm having trouble getting the second controller to function properly in my AngularJS application

Error message: Angular JS encountered an issue when trying to initiate the test module. The cause