score:0

Accepted answer

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>

image of the result

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:

mobile view result


Related Query