CODEWITHSUNDEEP
twitter-bootstrapcss
user45
user45

Reputation: 53

Display checkboxes in two columns with Bootstrap

I'm using Bootstrap to display the checkboxes in two columns. Short example:

<fieldset class="col-lg-6 col-md-12">
   <label>
      <input type="checkbox" />
      <span>Here is the text</span>
   </label>
</fieldset>

Here is an image of the checkboxes in two columns In the image you can see the "transportation" checkbox dropping much lower than the other checkboxes.

How can I prevent the empty space between the checkboxes, in certain screen sizes? I can't change the way I'm displaying the label and the span inside it, but I can add classes to them.

Upvotes: 3

Views: 8177

Answers (2)

Krists
Krists

Reputation: 96

You just have to add this CSS: 

ul {
  column-count: 2;
  column-gap: 2rem;
  list-style: none;
}

Made some changes in your HTML

<div class = "container">
  <div class="row">
    <div class="col-12">
      <ul>

       <li>
          <label>
            <input type="checkbox" />
            <span>Here is the text</span>
          </label>
       </li>

       <li>
          <label>
            <input type="checkbox" />
            <span>Here is the text</span>
          </label>
       </li>

       <li>
          <label>
            <input type="checkbox" />
            <span>Here is the text</span>
          </label>
       </li>

       <li>
          <label>
            <input type="checkbox" />
            <span>Here is the text</span>
          </label>
       </li>

       <li>
          <label>
            <input type="checkbox" />
            <span>Here is the text</span>
          </label>
       </li>



       </ul>
    </div>
  </div>
</div>

Upvotes: 6

Keystone Jack
Keystone Jack

Reputation: 309

You need to make your divs allign in a row like this:

<div class = "container">
  <div class="row">
    <fieldset class="col-sm-6">
      <label>
        <input type="checkbox" />
        <span>Here is the text</span>
      </label>
    </fieldset>
    <fieldset class="col-sm-6">
      <label>
        <input type="checkbox" />
        <span>Here is the text</span>
      </label>
    </fieldset>
  </div>
</div>

Upvotes: 0

Related Questions