/ What i'm trying to do is organize the checkboxes so that not only are they in line at each row, but also in organized columns so that the boxes arent scattered and unorganized.

i've tried quite a few different methods but this is the best i've been able to e up with so far.

<div class="row">
    <div class="col-md-4">    
        <label class="checkbox-inline"><input type="checkbox" value="Mesmer" name="Checkbox[]">Mesmer</label>
        <label class="checkbox-inline"><input type="checkbox" value="Guardian"  name="Checkbox[]">Guardian</label>&#160;&#160;&#160;&#160;
        <label class="checkbox-inline"><input type="checkbox" value="Necromancer" name="Checkbox[]">Necromancer</label>
    </div>
</div>
     <div class="row">
        <div class="col-md-4">
            <label class="checkbox-inline"><input type="checkbox" value="Ranger"  name="Checkbox[]">Ranger</label>&#160;
            <label class="checkbox-inline"><input type="checkbox" value="Elementalist" name="Checkbox[]">Elementalist</label>
            <label class="checkbox-inline"><input type="checkbox" value="Warrior"  name="Checkbox[]">Warrior</label>
        </div>
    </div>
     <div class="row">
        <div class="col-md-4">
            <label class="checkbox-inline"><input type="checkbox" value="Thief" name="Checkbox[]">Thief</label>&#160;&#160;&#160;&#160;
            <label class="checkbox-inline"><input type="checkbox" value="Engineer"  name="Checkbox[]">Engineer</label>&#160;&#160;&#160;&#160;&#160;
            <label class="checkbox-inline"><input type="checkbox" value="Revenant"  name="Checkbox[]">Revenant</label>   
        </div>
    </div>

What i've done is added   but it's still not correct, and makes my php loops more plicated.

https://jsfiddle/8tzLjwuk/ What i'm trying to do is organize the checkboxes so that not only are they in line at each row, but also in organized columns so that the boxes arent scattered and unorganized.

i've tried quite a few different methods but this is the best i've been able to e up with so far.

<div class="row">
    <div class="col-md-4">    
        <label class="checkbox-inline"><input type="checkbox" value="Mesmer" name="Checkbox[]">Mesmer</label>
        <label class="checkbox-inline"><input type="checkbox" value="Guardian"  name="Checkbox[]">Guardian</label>&#160;&#160;&#160;&#160;
        <label class="checkbox-inline"><input type="checkbox" value="Necromancer" name="Checkbox[]">Necromancer</label>
    </div>
</div>
     <div class="row">
        <div class="col-md-4">
            <label class="checkbox-inline"><input type="checkbox" value="Ranger"  name="Checkbox[]">Ranger</label>&#160;
            <label class="checkbox-inline"><input type="checkbox" value="Elementalist" name="Checkbox[]">Elementalist</label>
            <label class="checkbox-inline"><input type="checkbox" value="Warrior"  name="Checkbox[]">Warrior</label>
        </div>
    </div>
     <div class="row">
        <div class="col-md-4">
            <label class="checkbox-inline"><input type="checkbox" value="Thief" name="Checkbox[]">Thief</label>&#160;&#160;&#160;&#160;
            <label class="checkbox-inline"><input type="checkbox" value="Engineer"  name="Checkbox[]">Engineer</label>&#160;&#160;&#160;&#160;&#160;
            <label class="checkbox-inline"><input type="checkbox" value="Revenant"  name="Checkbox[]">Revenant</label>   
        </div>
    </div>

What i've done is added   but it's still not correct, and makes my php loops more plicated.

• javascript
• html
• twitter-bootstrap

Share Improve this question Follow asked Dec 2, 2015 at 5:08 Kevin KKevin K 11311 gold badge22 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Adjust the class as needed.
Check the snippet in full screen

<link href="//maxcdn.bootstrapcdn./bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-4">
    <label class="checkbox-inline">
      <input type="checkbox" value="Mesmer" name="Checkbox[]">Mesmer</label>
  </div>
  <div class="col-sm-4">
    <label class="checkbox-inline">
      <input type="checkbox" value="Guardian" name="Checkbox[]">Guardian</label>
  </div>
  <div class="col-sm-4">
    <label class="checkbox-inline">
      <input type="checkbox" value="Necromancer" name="Checkbox[]">Necromancer</label>
  </div>
</div>
</div>
<div class="row">
  <div class="col-sm-4">
    <label class="checkbox-inline">
      <input type="checkbox" value="Ranger" name="Checkbox[]">Ranger</label>
  </div>
  <div class="col-sm-4">
    <label class="checkbox-inline">
      <input type="checkbox" value="Elementalist" name="Checkbox[]">Elementalist</label>
  </div>
  <div class="col-sm-4">
    <label class="checkbox-inline">
      <input type="checkbox" value="Warrior" name="Checkbox[]">Warrior</label>
  </div>

</div>
</div>
<div class="row">
  <div class="col-sm-4">
    <label class="checkbox-inline">
      <input type="checkbox" value="Thief" name="Checkbox[]">Thief</label>
  </div>
  <div class="col-sm-4">
    <label class="checkbox-inline">
      <input type="checkbox" value="Engineer" name="Checkbox[]">Engineer</label>
  </div>
  <div class="col-sm-4">
    <label class="checkbox-inline">
      <input type="checkbox" value="Revenant" name="Checkbox[]">Revenant</label>
  </div>
</div>
</div>