<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="alert alert-danger" role="alert">
<i class="fa fa-exclamation-triangle fa-5x pull-left"></i> <strong>Warning:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus augue eros, elementum sed scelerisque eget, rhoncus in orci. Vivamus ac tellus in lacus consectetur dapibus et sit amet odio. Proin iaculis porttitor nulla ac convallis. Nullam posuere egestas lectus, eu facilisis nulla egestas eu. Phasellus quis sapien elementum, volutpat enim id, suscipit tortor. Nam varius et turpis et dapibus. Donec placerat auctor mauris id mattis.
</div>
I'm using Font Awesome within a Bootstrap alert as the above code and screen. I would like it so that the Font Awesome icon is centered vertically and all the text is on the right i.e. the two last lines shown in the screen are on the right as the lines above them.
Is there some way to do this in Font Awesome or should I just use Bootstrap columining to do it?
You can use bootstrap columns and then align them vertically:
HTML
<div class="alert alert-danger" role="alert">
<div class="row vertical-align">
<div class="col-xs-2">
<i class="fa fa-exclamation-triangle fa-5x"></i>
</div>
<div class="col-xs-10">
<strong>Warning:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus augue eros, elementum sed scelerisque eget, rhoncus in orci. Vivamus ac tellus in lacus consectetur dapibus et sit amet odio. Proin iaculis porttitor nulla ac convallis. Nullam posuere egestas lectus, eu facilisis nulla egestas eu. Phasellus quis sapien elementum, volutpat enim id, suscipit tortor. Nam varius et turpis et dapibus. Donec placerat auctor mauris id mattis.
</div>
</div>
</div>
CSS
.vertical-align {
display: flex;
align-items: center;
}
Here's a working bootply: http://www.bootply.com/d9RijiwsF0
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With