CODEWITHSUNDEEP
htmlcss
Mark
Mark

Reputation: 181

text not appearing besides checkbox

I need to have checkbox and text appear on same line.

input[type="checkbox"] {
  width: 20px;
  /*Desired width*/
  height: 20px;
  /*Desired height*/
  background: white;
}
<div class='form-group'>
  <div class='col-sm-4'>
    <label> BO Dashboard</label>
  </div>
  <div class='col-sm-4'>
    <input type="checkbox" name="" value="" checked>Access
  </div>
  <div class='col-sm-4'>
    <input type="checkbox" name="" value="">Control
  </div>
</div>

Upvotes: 0

Views: 98

Answers (3)

Sibeesh Venu
Sibeesh Venu

Reputation: 21719

You need to use vertical-align:middle;. The vertical-align property sets the vertical alignment of an element. The most common vertical-align properties are baseline, text-top, top, middle, bottom, text-bottom. Read more about it here.

input[type="checkbox"] {
  width: 20px;
  /*Desired width*/
  height: 20px;
  /*Desired height*/
  background: white;
  vertical-align:middle;
}
<div class='form-group'>
  <div class='col-sm-4'>
    <label> BO Dashboard</label>
  </div>
  <div class='col-sm-4'>
    <input type="checkbox" name="" value="" checked>Access
  </div>
  <div class='col-sm-4'>
    <input type="checkbox" name="" value="">Control
  </div>
</div>

Upvotes: 1

theoretisch
theoretisch

Reputation: 1728

You can do this with: 

position: relative;
vertical-align: middle;

This will place the text of the inputs in the middle. See the code below:

input[type="checkbox"]{
  width: 20px; /*Desired width*/
  height: 20px; /*Desired height*/
  background: white;
  position: relative;
  vertical-align: middle;
}
<div class='form-group'>
   <div class='col-sm-4'>
      <label> BO Dashboard</label>
   </div>
   <div class='col-sm-4'>
      <input type="checkbox" name="" value="" checked >Access
   </div>
   <div class='col-sm-4'>
      <input type="checkbox" name="" value="">Control
   </div>
</div>

Upvotes: 2

Gio7
Gio7

Reputation: 33

Try something like this:

<div class="container">
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 3
    </label>
  </form>
 </div>

Upvotes: 0

Related Questions