How to put a label to right of a checkbox in bootstrap

Question

I've been trying lots of ways to put a <input type="checkbox" id="123"/> infront of a label, but they're leaving a huge gap between theirselves. Any workaround? Here's my html:

<div class="row">
    <div class="col-sm-6">
        <div class="input-group input-group-sm">
            <input type="checkbox" id="ProcessingConsultantYN" value="0" />
            <label class="input-group-addon input-group-addon-pireus" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label>
        </div>
    </div>
</div>

Here's how it looks when being displayed on the website and what I actually want to fix:

You can better look for that solution when you go through bootstrap examples and documentation. [Bootstrap Form Element](http://getbootstrap.com/css/#forms) — Shubham Baranwal, Jul 26 '17 at 06:13
Yes, twitter bootstrap. I can't find anything wrong in the html inspector also. — Alexander Hristov, Jul 26 '17 at 06:14

score 9 · Accepted Answer · edited Jul 26 '17 at 06:11

9

Try below Code Just replace your label tag class with checkbox-inline.

<div class="row">
  <div class="col-sm-6">
    <div class="input-group input-group-sm">
      <input type="checkbox" id="ProcessingConsultantYN" value="0" />
      <label class="checkbox-inline" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label>
    </div>
  </div>
</div>

edited Jul 26 '17 at 06:11

Carl Binalla

5,393
5
27
46

answered Jul 26 '17 at 06:09

Shubham Baranwal

2,492
3
14
26

Why you edited my answer what so wrong in that? @Swellar – Shubham Baranwal Jul 26 '17 at 06:12
I put your codes in the built-in snippet instead of `JSFiddle` – Carl Binalla Jul 26 '17 at 06:14
But both codes are same and JSFiddle or Code Snippet will be not a proper issue for editing my answer. @Swellar – Shubham Baranwal Jul 26 '17 at 06:16
It actually worked, my bad. Adding input-group-addon messes it up again. – Alexander Hristov Jul 26 '17 at 06:18

Zaid Bin Khalid · Answer 2 · 2017-07-26T06:29:44.903

Try with this code. under the label, tag use your checkbox tag as per BOOTSTRAP official doc, or you can modify the structure what ever you want.

I just simply try to make an option with form-control you can use .form-control-static class as per Static control

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <div class="row">
      <div class="col-sm-6">
        <div class="checkbox">
          <label> <input type="checkbox"> Обработва се от Кредитен Консултант </label>
        </div>
        
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon1"><input type="checkbox" id="ProcessingConsultantYN" value="0" /></span>
          <label class="form-control">Обработва се от Кредитен Консултант</label>
        </div>
        
      </div>
    </div>

score 1 · Answer 3 · answered Jul 26 '17 at 06:47

How to align checkboxes and their labels consistently cross-browsers

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

AS @dfsq said check if something wrong or not in HTML inspector. Check the above link if it works or not.This link should sure help you. check jsfiddle

score 0 · Answer 4 · answered Jul 26 '17 at 06:13

0

class pull-left should suffice for you.

<div class="row">
  <div class="col-sm-6">
    <div class="input-group input-group-sm">
      <input type="checkbox" id="ProcessingConsultantYN" value="0" />
      <label class="pull-left" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label>
    </div>
  </div>
</div>

answered Jul 26 '17 at 06:13

ScanQR

3,740
1
13
30

Pulling it left makes it go over the actual checkbox. – Alexander Hristov Jul 26 '17 at 06:24

How to put a label to right of a checkbox in bootstrap

4 Answers4