CODEWITHSUNDEEP
javascripthtmljquerybootstrap-4text-alignment
Bamiji O
Bamiji O

Reputation: 1

Bootstrap: move text to the side of Checkbox

I'm trying to get the "Default checkbox" to be at the side of the checkbox

checkbox

what i have so far

<div class="col-2">
     <label for="Desc" class="col-sm col-form-label">Default Checkbox

      </label>
     <div class="col pr-0">
          <input type="checkbox" readonly id="defcheck" name="defcheck" class="form-control form-control-sm"
       data-toggle="tooltip" data-placement="right" size="2"> 
         <br />
                                    
      </div>
</div>

Tried to just move the label tag below the input type but that did not work

Upvotes: 0

Views: 63

Answers (2)

Mukesh Movaliya
Mukesh Movaliya

Reputation: 41

Use below code.

<div class="col-6">
     <div class="col pr-0" style="display: flex;">
          <input type="checkbox" readonly="" id="defcheck" name="defcheck" class="form-control form-control-sm" data-toggle="tooltip" data-placement="right" size="2" style="width: auto;"> 
          <label for="Desc" class="col-sm col-form-label" style="padding: 12px;">Default Checkbox</label>
      </div>
</div>

Upvotes: 2

Mehmet MAŞA
Mehmet MAŞA

Reputation: 11

<div class="col-2">
     <div class="col pr-0">
            <label for="Desc" class="col-sm col-form-label">Default Checkbox</label>
          <input type="checkbox" readonly id="defcheck" name="defcheck" class="form-control form-control-sm"
   data-toggle="tooltip" data-placement="right" size="2"> 
         <br />
      </div>
</div>

OR

<div class="col-2">
     <div class="col pr-0">
          <input type="checkbox" readonly id="defcheck" name="defcheck" class="form-control form-control-sm"
   data-toggle="tooltip" data-placement="right" size="2"> 
    <label for="Desc" class="col-sm col-form-label">Default Checkbox</label>

      </div>
</div>

Upvotes: 0

Related Questions