CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcheckboxbootstrap-4
Nate
Nate

Reputation: 7856

Custom checkboxes with checkbox under text

I'm trying to have custom inline checkboxes with the text aligned above the checkbox. The checkbox has to be horizontally centered compared to the text. It should look like this:

enter image description here

I have tried to add the <br/> tag and moved the text over the control like this:

  <label class="custom-control custom-checkbox">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this custom checkbox</span>
    <br />
    <input type="checkbox" class="custom-control-input">
  </label>

without success... you can see the failed plunker here.

This plunker is the normal inline checkboxes of bootstrap v4

Upvotes: 1

Views: 755

Answers (2)

tao
tao

Reputation: 90038

.custom-checkbox {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
}
.custom-control-indicator {
  position: static; /* override _custom-forms.scss */
}

... will do the trick, if I understand your request correctly. However, the text and the checkboxes are "vertically" aligned, not "horizontally".

.custom-checkbox {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
}
.custom-control-indicator {
  position: static; /* needed to override position:absolute; from 
                     * _custom-forms.scss - bootstrap 
                     */
}
<div>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check 1</span>
  </label>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check 2</span>
  </label>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check 3</span>
  </label>
</div>

Upvotes: 1

Mahesh
Mahesh

Reputation: 93

try this code......

<label for='chkCart'>Add to Cart</label><br>
<input type='checkbox' id='chkCart'/>

in your jquery script...

$(function () {
    $("#chkCart").click(function () {
        var lbl = $("label[for='"+$(this).attr('id')+"']");
        lbl.text($(this).is(":checked")?"Added":"Add to Cart");
    });
});

Upvotes: 0

Related Questions