Callout SCSS rules for Bootstrap 4 #bootstrap4 #scss #css

bootstrap-4-callouts.scss

/**
 * Import Bootstrap
 */
@import "../../node_modules/bootstrap/scss/bootstrap";


/**
 * Callouts
 */

// Settings
$callout-heading-colours: false;

// Rules
.callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem;
  
    p:last-child {
        margin-bottom: 0;
    }
  
    code {
        border-radius: .25rem;
    }

    @each $color, $value in $theme-colors {
        &-#{$color} {
            border-left-color: $value;

            @if ($callout-heading-colours) {
                h2,
                h3,
                h4,
                h5 {
                    color: $value;
                }
            }
        }
    }
}