Chartjs-How to align elements using a ChartBar from Chart.js and Alerts from Bootstrap 4?

According to Bootstrap’s grid system, you have to define a .row around both your .col-md-8 and .col containers. Next, remove the width: 30% styles and everything will work properly, as you will see in this fiddle:

<div class="card-body">
    <div class="row">
        <div class="col-md-8">
            <canvas id="ChartCitas"></canvas>
        </div>
        <div class="col">
            <div class="alert-wrap">
                <div class="alert alert-success">
                    <i class="fas fa-medkit fa-2x"></i> <strong>CITAS TOTALES:</strong> 964.00
                </div>

                <div class="alert alert-info">
                    <i class="fas fa-users fa-2x"></i> <strong>PACIENTES TOTALES:</strong> 3.00
                </div>

                <div class="alert alert-warning">
                    <i class="fas fa-user-md fa-2x"></i> <strong>MÉDICOS TOTALES:</strong> 25.00
                </div>

                <div class="alert alert-danger">
                    <i class="fas fa-hospital-alt fa-2x"></i> <strong>CONSULTORIOS TOTALES:</strong> 47.00
                </div>
            </div>
        </div>
    </div>
</div>

If you additionally want to optimized the mobile view, replace your .alert-wrap by a .row and set a <div class="col-6 col-md-12"> around your .alert‘s as shown in this fiddle:

<div class="card-body">
    <div class="row">
        <div class="col-md-8 mt-3">
            <canvas id="ChartCitas"></canvas>
        </div>
        <div class="col mt-3">
            <div class="row">
                <div class="col-6 col-md-12">
                    <div class="alert alert-success">
                        <i class="fas fa-medkit fa-2x"></i> <strong>CITAS TOTALES:</strong> 964.00
                    </div>
                </div>
                
                <div class="col-6 col-md-12">
                    <div class="alert alert-info">
                        <i class="fas fa-users fa-2x"></i> <strong>PACIENTES TOTALES:</strong> 3.00
                    </div>
                </div>

                <div class="col-6 col-md-12">
                    <div class="alert alert-warning">
                        <i class="fas fa-user-md fa-2x"></i> <strong>MÉDICOS TOTALES:</strong> 25.00
                    </div>
                </div>

                <div class="col-6 col-md-12">
                    <div class="alert alert-danger">
                        <i class="fas fa-hospital-alt fa-2x"></i> <strong>CONSULTORIOS TOTALES:</strong> 47.00
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Resulting in this mobile view and nearly the same desktop view as above: