Div to organize checkbox

Question

I have the following div:

<div class="col-sm-6">
  <input type="checkbox"> Touch Screen
  <input type="checkbox"> Wi-fi
  <input type="checkbox"> Bluetooth
  <input type="checkbox"> Flash
  <input type="checkbox"> Câmera Frontal
  <input type="checkbox"> GPS
  <input type="checkbox"> Tecnologia NFC
  <input type="checkbox"> Extensão para Cartão de Memória
</div>

She gets like this:

But I wanted to leave her like this:

How can I do that?

Answer 1

You must be using Bootstrap, so you must use Bootstrap’s own Grid system to do the organizing work, see the link http://getbootstrap.com/examples/grid/

<div class="col-sm-9">
  <div class="row">
    <div class="col-sm-3"><input type="checkbox"> Touch Screen </div>
    <div class="col-sm-3"><input type="checkbox"> Wi-fi </div>
    <div class="col-sm-3"><input type="checkbox"> Bluetooth </div>
  </div>
  <div class="row">
    <div class="col-sm-3"><input type="checkbox"> Flash </div>
    <div class="col-sm-3"><input type="checkbox"> Câmera Frontal </div>
    <div class="col-sm-3"><input type="checkbox"> GPS </div>
  </div>
  <div class="row">
    <div class="col-sm-3"><input type="checkbox"> Tecnologia NFC </div>
    <div class="col-sm-4"><input type="checkbox"> Extensão para Cartão de Memória </div>
  </div>
</div>

See a demonstration: http://www.bootply.com/8bSBV6znyp

Answer 2

I don’t know if it helps you much, but you can do this by example, but remembering that you have to be careful with size if it is responsive layout, but I believe it will give you a way.

https://jsfiddle.net/spxdry2m/1/

Hug.