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

Issue with retrieving body class in Internet Explorer on Magento platform. The body class is not being recognized in IE, but works fine in Mozilla and Chrome

Tips for utilizing Sass and CSS Modules within create-react-app

Delving into the World of CSS

The event.js file is displaying an error at line 141, causing an unhandled 'error' event to be thrown

Run the setInterval function immediately on the first iteration without any delay

Is it unnecessary to mention both JavaScript and AJAX together?

"Return to the top" feature that seamlessly integrates with jQuery's pop-up functionality

Guide on utilizing popup box input to amend CSS (background color)

The PasswordResetView in Django using Vue.js encounters a 403 Forbidden error when attempting to post with Axios due to an

creating an interactive table with the help of the useState hook

How to extract the value of a key from JSON using JavaScript

Running complex operations within a sorting function just once

Issue with Fancybox Buttons not appearing on parent page upon opening

Executing Node.js Function from an External File Dynamically

Is it possible to manipulate an image tag's image using only CSS?

The video being shown in Jupyter Notebook is unable to be played

Tips for showing an Object with nested Objects in Vue.js

Modify the size of a div based on the status of a checkbox using only HTML and CSS

How can you connect a property to the output of a method in Vue.js when working with TypeScript and vue-property-decorator?

Retrieve childNodes of the Select All input using jQuery from the container node with the class name "container"