title: Attempting to show multiple checkboxes using more than one column HTML PHP
body: <p>I have successfully managed to return all the 'tags' from my MySQL database table into checkboxes so the user can select a few.</p>
  
  <p>Currently it is displaying as one long column which isn't very efficient as the modal screen size is quite small. I was wondering if there was a way to break it up and display it into 3 columns instead of just the one.</p>
  
  <p>This is what it currently looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/n5Z1a.png" alt="Tag modal"></p>
  
  <p>any ideas on how i can achieve my end goal to look similar to this:</p>
  
  <p><img src="https://i.stack.imgur.com/SwT5v.png" alt="End Goal"></p>
  
  <p>This is the entire code i have at the moment:</p>
  
  <pre><code>    &lt;?php
  
        include "db_conx.php";
  
        try
          {
  
        $db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
  
          $db_conx-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          $stmt = $db_conx-&gt;prepare('SELECT * FROM tag_details ORDER BY tag_title ASC');
          $stmt-&gt;execute();
          //$count = $stmt&gt;rowCount();
          $tags = $stmt-&gt;fetchAll(PDO::FETCH_ASSOC);
              }
          catch(Exception $e)
          {
              /*** if we are here, something has gone wrong with the database ***/
          $e-&gt;getMessage();
          }
  
  
      ?&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;test&lt;/title&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/styles2.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src='js/index.js'&gt;&lt;/script&gt;
      &lt;script&gt;
      $(function(){
          $('#addPModal').on('show.bs.modal', function (event) {
              var button = $(event.relatedTarget);
  
          });
      });
    &lt;/script&gt;
    &lt;script&gt;
    $(function(){
      var limit = 3;
      $('input.checkbox').on('change', function(evt) {
          if($(this).siblings(':checked').length &gt;= limit) {
              this.checked = false;
          }
      });
    });
    &lt;/script&gt;
    &lt;style&gt;
  
  .checkbox-inline{
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
  }
  
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="btn-group-vertical btn-lg pull-right" role="group"&gt;
  
      &lt;div class="btn-group" role="group"&gt;
        &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addPModal" data-id="#"&gt;Add New Proposal&lt;/button&gt;
      &lt;/div&gt;&lt;p/&gt;
    &lt;/div&gt;
  
    &lt;div id="addPModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addPModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Showing All Tags &lt;/h4&gt;
                  &lt;p class="text-danger"&gt;&lt;small&gt;(Select up to 3)&lt;/small&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;form id="viewForm"&gt;
  
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label" for="course_details"&gt;Select Tags:&lt;/label&gt;&lt;p&gt;&lt;/p&gt;
                          &lt;div class="checkbox-inline"&gt;
                              &lt;?php foreach($tags as $tag): ?&gt;
                              &lt;div&gt;
                                  &lt;input name='tag[]' class="checkbox" type="checkbox" value="&lt;?php echo $tag['tag_code'] ?&gt;"&gt;&lt;?php echo $tag['tag_title'] ?&gt;&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;?php endforeach ?&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>new screenshot with css changes as advised:
  <img src="https://i.stack.imgur.com/fnRze.png" alt="Updated"></p>
  
  <p>Thanks in advance!</p>