Bootstrap: Alert - add .alert-icon container class to style icons within alerts easily

Created on 26 Aug 2017 · 3Comments · Source: twbs/bootstrap

Could we add an alert-icon class which can be applied to icons inside an alert to style them (provide a fixed width).

JSFiddle: https://jsfiddle.net/koeg9d5q/

I can do this view the grid system like below, but I wanted to remove all the rows and cols if possible to clean up the HTML.

<!-- Using grids - View the jsfiddle: https://jsfiddle.net/koeg9d5q/ -->
<div class="alert alert-success" role="alert">
    <div class="row">
        <div class="col-1 alert-icon-col">
            <span class="fa fa-check fa-fw"></span>
        </div>
        <div class="col">
            <strong>Well done!</strong> You successfully read this important alert message.<br/> 
            Which spans multiple lines.
        </div>
    </div>
</div>

```css
/** CSS for above - Force the width for icons */
.alert .alert-icon-col {
min-width: 25px;
max-width: 25px;
}

Can we do this via BS4 CSS so the HTML looks cleaner - something like below, remove the rows and cols, and wrap the icon in a ``div.alert-icon`` which is styled by BS4.

``` html
<div class="alert alert-success" role="alert">
    <div class="alert-icon">
        <span class="fa fa-check fa-fw"></span>
    </div>
    <strong>Well done!</strong> You successfully read this important alert message.<br/> 
    Which spans multiple lines.
</div>

Would be great to have this out the box with BS4, the CSS would be minimal but would make alerts and icons easier to work with together.

Screenshot below, View the JSFiddle here: https://jsfiddle.net/koeg9d5q/

screen shot 2017-08-26 at 17 13 26