7

Code

  <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>

Screen

enter image description here

Question

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?

1 Answer 1

6

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.