I don't think I get the new grid system. .col-12 .col-lg-8 What's going on here? If I were to guess, I'm assuming it's going to be 12 columns if its a mobile, 8 if a tablet or a desktop. In what situation would that be useful? It looks like you'd end up with some pretty complicated mark-up quickly like that.
In order to reduce complexity like this, you should avoid using Bootstrap classes in your HTML directly.
Instead, use semantic class names for your app and use the new &:extend() directive in LESS 1.4 or @extend in SASS (if you're using bootstrap-sass). You'll end up with much more readable HTML and CSS, and will insulate yourself from future changes in Bootstrap.
I do stuff like this in SASS
%flash {
@extend .container;
@extend .alert;
margin: 15px auto;
border-radius: 0;
.close { top: 0; }
}
.flash-success {
@extend %flash;
@extend .alert-success;
.close {
color: $successText;
opacity: 1;
}
}
.flash-error {
@extend %flash;
@extend .alert-error;
.close {
color: $errorText;
opacity: 1;
}
}