How to create alert message with media-object behaviour? - html

Question

I want to create alert info message with media-object behaviour.
I mean this behaviour:
There is image on the left side of the alert and text on the another side.
What I've tried?
I am getting this:
With such code:
<div class="alert alert-info">
<div class="media">
<span class="pull-left glyphicon glyphicon-exclamation-sign"></span>
<div class="media-body">
<p>string1</p><p>string2</p><p>string3</p>
</div>
</div>
</div>
But glyphicon is too small. I need bigger glyphicon here. How I can make icon bigger or what approach should I use?

Answer 1

This is as far as I could get:
http://jsfiddle.net/9Sx62/
Basically, I wrapped icon with .media-object div, the docs says that it shouldn't be mixed with other components. Then, I increased font-size so icon would be bigger

Answer 2

This helped:
<div class="media">
<span class="pull-left lg glyphicon glyphicon-info-sign"></span>
<div class="media-body">
<p>Статус договора <em>действует</em> означает, что Вы можете сделать заказ на поставку у данного поставщика.</p>
<p>В таблице встречаются строки разных цветов. Зеленый цвет означает, что договор действующий, а серый — срок действия истек.</p>
</div>
</div>
Also, class .lg specified in css:
.lg {
font-size: 1.5em;
}