CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Kevin K
Kevin K

Reputation: 113

Bootstrap organize multi row and column checkbox

https://jsfiddle.net/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 come 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 &#160; but it's still not correct, and makes my php loops more complicated.

Upvotes: 2

Views: 6856

Answers (1)

Lucky Chingi
Lucky Chingi

Reputation: 2258

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

<link href="//maxcdn.bootstrapcdn.com/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>

Upvotes: 4

Related Questions