Icon on left of Bootstrap alert

Question

I'm trying to put a glyphicon on the left side of an alert div. When the alert's text is more than one line, I want the new line to start where the first line's text started, rather than under the glyphicon.

If I use divs for the icon and message, the icon sits on top of the message. If I use spans, the message follows the icon and wraps under it.

Assume the glyphicon's width is not known ahead of time, so using the ::first-line selector isn't viable without something more clever than I. I also don't want to put the glyphicon in a .col-* because .col-*-1 is way too large. .pull-left and .pull-right haven't seemed to have an effect, regardless of whether I use a div or a span for the glyphicon and message.

The easiest solution is to use a table (le gasp!), but I'm trying to avoid that.

I'm also still deciding whether I want the icon to be at the top left or middle left of the alert. Even with a table, I was having trouble centering the icon vertically.

What I have (pretty simple):

<div class="col-sm-9 col-md-10">
    <div class="col-xs-12 alert alert-warning">
        <div class="glyphicon glyphicon-exclamation-sign"></div>
        <div>My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!  My message here.  Lots of text for several lines!</div>
    </div>
<div>

Link to JSFiddle

Any ideas?

Answer 1

Try adding this to your CSS (you may need to be more specific than this)

.alert .glyphicon{
    display:table-cell;
}

.alert div,
.alert span{
    padding-left: 5px;
    display:table-cell;
}

See Updated Fiddle