1

I have a Thymeleaf/Bootstrap 3 view that contains the following piece of code to iterate my list of checkboxes and displays them vertically:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="form-group-lg col-xs-5">
    <label class="control-label" for="facilities">Facilities</label>
    <div class="form-group-lg">
      <div th:each="facility : ${facilities}">
        <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
        <label class="checkbox-inline" th:text="${facility}"></label>
      </div>
    </div>
  </div>
</div>

enter image description here

I would like to display the checkboxes in groups of 3 horizontally like this. Any ideas?

enter image description here

3 Answers 3

2

Use Css column to do this. simple. use this code below:

Updated Check this live demo on jsfiddle

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="form-group-lg col-xs-5">
    <label class="control-label" for="facilities">Facilities</label>
    <div class="form-group-lg">
      <div th:each="facility : ${facilities}" class="column_2">
        <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
        <label class="checkbox-inline" th:text="${facility}"></label>
      </div>
    </div>
  </div>
</div>

Css:

.column_2{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
1
  • Thanks Sarower Jahan
    – user4913460
    Jul 14, 2016 at 8:24
1

if you are not worried about order, you can just float the checkboxes. You need to add a div before every checkbox according to bootstrap documentation example (see here).

The HTML should be like this:

<!--not worried about order-->
<div class="row no-order">
<div class="form-group-lg col-xs-5">
<label class="control-label" for="facilities">Facilities</label>
<div class="form-group-lg clearfix">
<!--if this is your looped div, then you can just put the class "checkbox" in here-->
  <div th:each="facility : ${facilities}"> 
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    1</label></div>

    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    2</label>
    </div>
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    3</label></div>
    <div class="checkbox"> <label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    4</label></div>
    <div class="checkbox">
      <label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    5</label>
    </div>
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
   6</label></div>
  </div>
</div>

and CSS:

.no-order div.checkbox{
   float:left;
   width:50%
 }

BUT, if you need to maintain order (2 after 1 and NOT on the side of 1) and want a pure CSS solution, then you're screwed in terms of browser support, because you have to use `columns. see canIUse here: http://caniuse.com/#search=columns . I suppose jQuery/Javascript solutions can be found that will give you better flexibility.

HTML (order maintained - pretty much the same, except checkbox-group gets added):

<div class="row ordered">
<div class="form-group-lg col-xs-5">
<label class="control-label" for="facilities">Facilities</label>
<div class="form-group-lg">
  <div th:each="facility : ${facilities}" class="checkbox-group">
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    1</label></div>

    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    2</label>
    </div>
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    3</label></div>
    <div class="checkbox"> <label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    4</label></div>
    <div class="checkbox">
      <label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
    5</label>
    </div>
    <div class="checkbox"><label class="checkbox-inline" th:text="${facility}">
    <input type="checkbox" th:field="*{checkedItems}" th:value="${facility}" />
   6</label></div>
  </div>
</div>

and CSS :

  .ordered .checkbox-group{
  -webkit-columns: 2 150px;
  -moz-columns: 2 150px;
  columns: 2 150px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
 }
 .ordered div.checkbox{
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
 }

Here's my codepen for this: http://codepen.io/samia92/pen/JKrojB/

0

I'm not sure how practical it is, but you could nest columns around each set of checkboxes and include that inside your iteration or for more control you can float the checkboxes yourself with CSS.

Nested columns Example:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm-6">

      <label for="facilities">Facilities</label>

      <div class="row">
        <div th:each="facility : ${facilities}">

          <div class="col-xs-6">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Toilets
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Bar
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Restaurants
              </label>
            </div>
          </div>

          <div class="col-xs-6">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Free WiFi
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Gift Shop
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Free Coffee / Tea
              </label>
            </div>
          </div>

          <div class="col-xs-6">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">TV
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Bed
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Something Else
              </label>
            </div>
          </div>

        </div>
      </div>

    </div>

    <div class="col-sm-6">
      <label>Input</label>
      <input type="text" class="form-control">
    </div>

  </div>
</div>
<hr>
<div class="container">
  <div class="row">
    <div class="col-sm-6">

      <label for="facilities">Facilities</label>

      <div class="row">
        <div th:each="facility : ${facilities}">

          <div class="col-sm-6">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">One
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Two
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Three
              </label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Four
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Five
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Six
              </label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Seven
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Eight
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Nine
              </label>
            </div>
          </div>

        </div>
      </div>

    </div>

    <div class="col-sm-6">
      <label>Input</label>
      <input type="text" class="form-control">
    </div>

  </div>
</div>

Or if you want more control you can build a grid yourself just for the checkboxes.

Floated Checkbox Example:

div.form {
  background: tomato;
}
div.form .checkbox {
  background: cornflowerblue;
}
@media (min-width: 480px) {
  div.form {
    display: table;
    background: deeppink;
  }
  div.form .checkbox {
    width: 50%;
    display: inline-table;
    margin: 5px 0;
  }
  div.form .checkbox:nth-child(odd) {
    background: dodgerblue;
  }
  div.form .checkbox:nth-child(even) {
    float: right;
    background: lightskyblue;
  }
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">

    <div class="col-sm-6">
      <div class="form">

        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Toilets
          </label>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Bar
          </label>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Restaurants
          </label>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Free WiFi
          </label>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Gift Shop
          </label>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Free Coffee / Tea
          </label>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Free WiFi
          </label>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Gift Shop
          </label>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" value="">Free Coffee / Tea
          </label>
        </div>

      </div>
    </div>

    <div class="col-sm-6">
      <label>Input</label>
      <input type="text" class="form-control">
    </div>

  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.