mercredi 24 avril 2019

Difficulty Aligning Bootstrap Custom Checkboxes to the Right

I have a bootstrap 4 table in which I have custom checkboxes that I would like to align to the right.

For an example, please reference this fiddle

I have used this method to create the custom checkboxes:

<label class="custom-control custom-checkbox">
    <input type="checkbox" id="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-label"></span>
</label>

So far, I have tried adding this CSS

.custom-control {
    padding: 0 !important;
    margin: 0 !important;
    width: 0px !important;
}

.custom-control-label::before {
  left: 0;
  padding-right: 0;
  margin-right: 0;
}

.custom-control-label::after {
  left: 0;
  padding-right: 0;
  margin-right: 0;
}

.custom-control .custom-checkbox {
  padding-right: 0;
  margin-right: 0;
}

As well as adding the .right and .pull-right classes to all of the checkbox elements to no avail.

This question solves it by using .pull-right Align CheckBox to the right using Bootstrap




Aucun commentaire:

Enregistrer un commentaire