CODEWITHSUNDEEP
csstwitter-bootstrap
Hero Stripe
Hero Stripe

Reputation: 89

Bootstrap 3 grid 3 column

I want to deploy my checkbox in 3 column in bootstrap 3

example:

chk1 chk2 chk3

chk4 chk5 chk6

chk7 chk8 chk9

Here is my try : 

<div class="row">
<div class="col-md-12">
    <hr class="hr">
<h3>Izaberi ostale opcije:</h3>


<input type="checkbox" id='Kabinet'>  <label for="check1">Kabinet</label>
<input type="checkbox" id='Monitor'>  <label for="check1">Monitor</label>
<input type="checkbox" id='Bravice'>  <label for="check1">Bravice</label>



<input type="checkbox" id='Pojacalo'>  <label for="check1">Pojacalo</label>
<input type="checkbox" id='Coin usta'>  <label for="check1">Coin usta</label>
<input type="checkbox" id='Bar kod'>  <label for="check1">Bar kod</label>


<input type="checkbox" id='Toper'>  <label for="check1">Toper</label>
<input type="checkbox" id='Monitor + Touch'>  <label for="check1">Monitor+Touch</label>
<input type="checkbox" id='Brojaci'>  <label for="check1">Brojaci</label>


    </div>

i try it to put class=" col-md-6" and other but it don't work.. I thinking of using css for that but then i don't need bootstrap.. and it will not be responsive. Do you have some idea. I'am new to bootstrap. Do I need new rows ?

Upvotes: 1

Views: 5412

Answers (1)

Anup
Anup

Reputation: 9738

Its easy, Use 3 div's, if you want in 3 columns otherwise if you want in rows as stated in your eg. replace below class to col-md-12 :-

<div class="row">

    <hr class="hr">
<h3>Izaberi ostale opcije:</h3>
<div class="col-md-4">    

<input type="checkbox" id='Kabinet'>  <label for="check1">Kabinet</label>
<input type="checkbox" id='Monitor'>  <label for="check1">Monitor</label>
<input type="checkbox" id='Bravice'>  <label for="check1">Bravice</label>
</div>

    <div class="col-md-4">
<input type="checkbox" id='Pojacalo'>  <label for="check1">Pojacalo</label>
<input type="checkbox" id='Coin usta'>  <label for="check1">Coin usta</label>
<input type="checkbox" id='Bar kod'>  <label for="check1">Bar kod</label>
</div>

<div class="col-md-4">
<input type="checkbox" id='Toper'>  <label for="check1">Toper</label>
<input type="checkbox" id='Monitor + Touch'>  <label for="check1">Monitor+Touch</label>
<input type="checkbox" id='Brojaci'>  <label for="check1">Brojaci</label>   

    </div>

Upvotes: 1

Related Questions