CODEWITHSUNDEEP
htmltwitter-bootstrap
Alexander Hristov
Alexander Hristov

Reputation: 311

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

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: enter image description here

Upvotes: 4

Views: 16188

Answers (4)

opalfire
opalfire

Reputation: 93

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

Upvotes: 1

Zaid Bin Khalid
Zaid Bin Khalid

Reputation: 763

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>

Upvotes: 1

ScanQR
ScanQR

Reputation: 3820

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>

Upvotes: 0

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

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>

Upvotes: 9

Related Questions