Content Comparison

<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>

<div class="card">
    <div class="card-header">Check Box<</div>
    <div class="card-body">
        <form>
            <div class="form-group row">
                <label for="inputKey" class="col-lg-3 col-form-label">Regular</label>
                <div class="col-lg-9">
                    <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" class="custom-control-input" id="customCheck1">
                        <label class="custom-control-label" for="customCheck1"></label>
                    </div>
                    <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" class="custom-control-input" id="customCheck2" checked>
                        <label class="custom-control-label" for="customCheck2"></label>
                    </div>
                    <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" class="custom-control-input" id="customCheck3" indeterminate="true">
                        <label class="custom-control-label" for="customCheck3"></label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputKey" class="col-lg-3 col-form-label">Disabled</label>
                <div class="col-lg-9">
                    <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" class="custom-control-input" id="customCheck4" disabled>
                        <label class="custom-control-label" for="customCheck4"></label>
                    </div>
                    <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" class="custom-control-input" id="customCheck5" disabled checked>
                        <label class="custom-control-label" for="customCheck5"></label>
                    </div>
                    <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" class="custom-control-input" id="customCheck6" indeterminate="true" disabled>
                        <label class="custom-control-label" for="customCheck6"></label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputKey" class="col-lg-3 col-form-label">Error</label>
                <div class="col-lg-9">
                    <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" class="custom-control-input is-inabvlidinvalid" id="customCheck7">
                        <label class="custom-control-label" for="customCheck7"></label>
                    </div>
                    <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" class="custom-control-input is-inabvlidinvalid" id="customCheck8" checked>
                        <label class="custom-control-label" for="customCheck8"></label>
                    </div>
                    <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" class="custom-control-input is-inabvlidinvalid" id="customCheck9" indeterminate="true">
                        <label class="custom-control-label" for="customCheck9"></label>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>