How can I change the color of checkbox [Bootstrap]?

Question

<div class="modal-footer">
    <label class="checkbox-inline pull-left" for="rme"><input type="checkbox" class="custom-checkbox checkbox-primary" id="rme"> Remember me</label>
    <input type="submit" class="btn btn-success pull-right" value="Login">
</div>

How To modify same code to make the checkbox background color to be green

Answer 1

You are already using Bootstrap's "custom" form controls (albeit slightly incorrectly -- the markup for custom Bootstrap 4 controls is different from your example).

Here's the correct markup for a custom checkbox in Bootstrap 4:

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

The custom look is governed by the custom-* CSS classes. As you are seeing, the default color is Bootstrap's primary "blue" color. To make it green, you would have to override or add your own custom CSS class(es). Here is an example that uses a new class so that if you still want to use the default blue sometimes, you can.

.custom-control-input-green:focus~.custom-control-label::before {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.custom-control-input-green:checked~.custom-control-label::before {
  border-color: #28a745 !important;
  background-color: #28a745 !important;
}

.custom-control-input-green:focus:not(:checked)~.custom-control-label::before {
  border-color: #5bd778 !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
  background-color: #d6f5dd !important;
  border-color: #d6f5dd !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="custom-control custom-checkbox custom-checkbox-green">
  <input type="checkbox" class="custom-control-input custom-control-input-green" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>