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">Split Button</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">
                    <button type="button" class="btn btn-sm">Split Button</button>
                    <button type="button" class="btn btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Fourth Option</a>
                    </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">
                    <button type="button" class="btn btn-sm" disabled>Split Button</button>
                    <button type="button" class="btn btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Fourth Option</a>
                    </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">
                    <button type="button" class="btn btn-sm">Split Button</button>
                    <button type="button" class="btn btn-sm dropdown-toggle dropdown-toggle-split is-invalid" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Fourth Option</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>